Search code examples
twitter-bootstrapbootstrap-5bootstrap-tablex-editable

Bootstrap 5 + Bootstrap-Table + X-editable for in-place editing of table cells?

I am using Bootstrap 5.2.3 and the newest Bootstrap-Table. I would like to make some table columns editable in-place. For instance, for the following table:

ID FIRST_NAME LAST_NAME TOWN
1 John Smith New York
2 Jane Doe Paris

...i would like users to be able to modify the value in column TOWN.

In the documentation of Bootstrap-Table, they say this should be done using plugin x-editable.

Now, I am wondering if this is really the best solution, as x-editable seems to be very old and only support Bootstrap 3... Nonetheless, I've found a fork skycyclone/x-editable (which is a fork of Talv/x-editable which forks the original); it contains bootstrap5-editable and seems to be working, but is it a reliable way to go?

2. Now, I've managed to get X-editable working for a static link (it displays the inline editor and JS alert as intended), however when I click on the table cells it doesn't do anything. What could be wrong?

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Test</title>

        <link href="vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="vendor/fortawesome/font-awesome/css/all.min.css" rel="stylesheet">
        <link href="vendor/wenzhixin/bootstrap-table/dist/bootstrap-table.min.css" rel="stylesheet">
        <link href="skycyclone-x-editable/dist/bootstrap5-editable/css/bootstrap-editable.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <!-- x-editable works! -->
                <a href="#" id="username" data-type="text" data-pk="1" data-title="Enter username">superuser</a>

                <!-- it doesn't... -->
                <table class="table" id="myEditableTable" data-toggle="table" data-id-field="ID" data-editable="true">
                    <thead>
                        <tr>
                            <th scope="col" data-field="ID">ID</th>
                            <th scope="col" data-field="FIRST_NAME">First name</th>
                            <th scope="col" data-field="LAST_NAME">Last name</th>
                            <th scope="col" data-field="TOWN" data-editable="true">Town</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td>1</td><td>John</td><td>Smith</td><td>New York</td></tr>
                        <tr><td>2</td><td>Jane</td><td>Doe</td><td>Paris</td></tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- JavaScript -->

        <script src="vendor/components/jquery/jquery.min.js"></script>
        <script src="vendor/twbs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
        <script src="vendor/wenzhixin/bootstrap-table/dist/bootstrap-table.min.js"></script>
        <script src="skycyclone-x-editable/dist/bootstrap5-editable/js/bootstrap-editable.min.js"></script>

        <script>
            $(function() {
                $('#username').editable({
                    success: function(response, newValue) {
                        alert('newValue = ' + newValue);
                    }
                });
            });
        </script>
    </body>
</html>
Solution

  • After further testing, I've come to the conclusion that this will not work out...

    • the original X-editable is 10 years old and only supports Bootstrap 2 and 3
    • there are some forks for newer Bootstrap versions (Talv/x-editable, skycyclone/x-editable, haught/x-editable-bs4), but who knows if they are reliable...?
    • the official BT example page doesn't even work
    • Bootstrap-table's search matches highlighting displays escaped <mark> tags in editable columns
    • in some cases, I'm getting JS errors around this.container.tip().is() and HTML escaping is sometimes disturbed, even in non-editable columns (e.g. correctly escaped &amp; suddenly becomes & after I sort or filter my table)

    Therefore, I will drop the idea of using X-editable and simply implement a handler on click-cell.bs.table event, display a small modal form and then call updateCellByUniqueId to update the table with the new value.