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

File Size: 7.11 KB
Views Total: 14075
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


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

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

4. Generate a Bootstrap table from JSON:

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

5. Convert table data into JSON:


Change log:


  • 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.