jQuery Inline Editor For Bootstrap 3/4 Tables - Table Editor

Table Editor is a lightweight jQuery/Bootstrap plugin which provides an inline editing functionality for table cells on single click. Supports both Bootstrap 3 and Bootstrap 4.

More features:

• Converts table data to JSON.
• Converts JSON to table data.
• Add/remove columns and rows via Right-click context menu.

How to use it:

1. Add the jQuery Table Editor plugin's JS and CSS files to your Bootstrap project.

<!-- Requirement: jQuery -->
<script src="jquery.min.js"></script>

<!-- Requirement: Bootstrap -->
<link rel="stylesheet" href="bootstrap.min.css">
<script src="bootstrap.min.js"></script>

<!-- Table editor -->
<link rel="stylesheet" href="bootstrap.table-editor.css">
<script src="bootstrap.table-editor.js"></script>

2. Call the plugin on the target Bootstrap table and done.

$('table').tableEditor();

3. Execute a callback function on each table cell change.

$('table').tableEditor({
  onChange: function(value, cell, table, tableEditor) {
    console.log(value, cell, table, tableEditor)
  }
})

4. Generate a Bootstrap table from JSON:

$('table').tableEditor('json', [
  [1,2,3,4,5],
  [6,7,8,9,0]
])

5. Convert table data into JSON:

$('table').tableEditor('json')

Change log:

2017-07-12

• Added Dutch language translation

---

This awesome jQuery plugin is developed by datamosh. For more Advanced Usages, please check the demo page or visit the official website.