Sortable/Editable Table Generator Plugin - jQuery ediTable

ediTable is a lightweight (~11kb) jQuery CRUD Table plugin which dynamically renders editable and sortable data tables from plain HTML and/or JSON data.

More features:

• Double-click cells to start editing.
• Click the table header to sort the table.
• Click the last row to add a new row.
• Save and delete data via AJAX requests.
• Custom actions buttons.
• Keyboard interactions.
• Callback functions.
• Supported form controls: text (default), number, checkbox, image, select, url, color, email.
• Compatible with most JavaScript/CSS frameworks.

How to use it:

1. To use the plugin, include the following JavaScript and CSS files in the document.

<link rel="stylesheet" href="dist/css/ediTable.min.css"/>
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="dist/js/ediTable.min.js"></script>

2. Convert the regular table into a CRUD data table.

<table class="ediTable">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th> 
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-index="name">John</td>
      <td data-index="username">Doe</td> 
      <td data-index="age">30</td>
    </tr>
    <tr>
  </tbody>
</table>

$(function(){
  $(".ediTable").ediTable();
});

3. Generate a CRUD data table from JSON data.

<table class="ediTable">
</table>

var tableData = [{
    "index": 1,
    "pic":"avatar.png",
    "integer": 30,
    "link": "https://www.jqueryscript.net",
    "type": "number", // input type, default text
    "fullname": "John Doe",
    "email": "[email protected]",
    "bool": "false"
},
{
    "index": 2,
    "pic":"avatar.png",
    "integer": 40,
    "link": "https://www.jqueryscript.net",
    "type": "checkbox",
    "fullname": "Mary Moe",
    "email": "[email protected]",
    "bool": "true"
}];  

$(".ediTable").ediTable({
  json:{
    body: tableData,
    head: []
  }
});

4. Enable/disable Sortable and Editable functionalities.

$(".ediTable").ediTable({
  editable: true, // default: true
  sortable: true // default: false
});

5. Add custom edit/delete buttons to the table.

$(".ediTable").ediTable({
  button:{
    edit:{
      active:false,
      text:"edit",  // TEXT/HTML
      selector:"edit", // class
    },
    delete:{
      active:false,
      text:"delete",  // TEXT/HTML
      selector:"delete", // class
    },
    title:"Actions", // th
  }
});

6. Allow new rows to be added by clicking on the last row.

$(".ediTable").ediTable({
  add: true // default: false
});

7. Enable/disable keyboard interactions.

$(".ediTable").ediTable({
  keyboard: true
});

8. Available event handlers.

$(".ediTable").ediTable({
  beforeSave:function(values,$tr){},
  afterSave:function(newValues,oldValues,$tr){},
  beforeEdit:function(values,$tr){},
  afterEdit:function(values,$tr){},
  beforeDelete:function(values,$tr){},
  afterDelete:function(values,$tr){},
  beforeAdd:function(){},
  afterAdd:function(){},
  beforeAppend:function(){},
});

9. Get the table data.

table.data();

Changelog:

2020-04-05

• Fixed sortable option

2019-10-25

• JS update

---

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