CODEWITHSUNDEEP
twitter-bootstrapbootstrap-5bootstrap-tablex-editable
Leszek Pachura
Leszek Pachura

Reputation: 569

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>

Upvotes: 3

Views: 9854

Answers (3)

Leszek Pachura
Leszek Pachura

Reputation: 569

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.

Upvotes: 2

Leszek Pachura
Leszek Pachura

Reputation: 569

It turns out I was missing the Editable extension of Bootstrap-table.

Working code:

<!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="skycyclone-x-editable/dist/bootstrap5-editable/css/bootstrap-editable.css" rel="stylesheet">
        <link href="vendor/wenzhixin/bootstrap-table/dist/bootstrap-table.min.css" rel="stylesheet">        
    </head>
    <body>
        <div class="container">
            <table id="mainTable" data-toggle="table" data-classes="table table-striped">
                <thead>
                    <tr>
                        <th scope="col" data-field="USER_ID">User ID</th>
                        <th scope="col" data-field="FIRST_NAME">First name</th>
                        <th
                            scope="col"
                            data-field="LAST_NAME"
                            data-editable="true"
                            data-editable-type="text"
                            data-editable-mode="inline"
                            data-editable-emptytext="N/A"
                        >Last name</th>
                        <th scope="col" data-field="EMAIL">Email</th>
                        <th scope="col" data-field="COUNTRY">Country</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>1</td><td>John</td><td>Smith</td><td>[email protected]</td><td>US</td></tr>
                    <tr><td>2</td><td>Jane</td><td>Doe</td><td>[email protected]</td><td>ES</td></tr>
                    <tr><td>3</td><td>Alice</td><td></td><td>[email protected]</td><td>FR</td></tr>
                    <tr><td>4</td><td>Bob</td><td>Jones</td><td>[email protected]</td><td>UK</td></tr>
                </tbody>
            </table>
        </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="skycyclone-x-editable/dist/bootstrap5-editable/js/bootstrap-editable.min.js"></script>
        <script src="vendor/wenzhixin/bootstrap-table/dist/bootstrap-table.min.js"></script>
        <script src="vendor/wenzhixin/bootstrap-table/dist/extensions/editable/bootstrap-table-editable.min.js"></script>

        <script>
            $(function() {
                $("#mainTable").on("editable-save.bs.table", function(event, field, row, rowIndex, oldValue, el) {
                    alert("New value = " + row[field] + ", old value = " + oldValue);
                });
            });
        </script>
    </body>
</html>

Upvotes: 2

paciekFly
paciekFly

Reputation: 47

try changing data-toggle="table" to data-bs-toggle="table"

Upvotes: 0

Related Questions