Simple jQuery Editable Table Plugin For Semantic UI

File Size: 712 KB
Views Total: 22955
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple jQuery Editable Table Plugin For Semantic UI

A jQuery based table plugin that uses Semantic UI to create a nice looking editable data table on your web application.

How to use it:

1. Load the required Semantic UI framework in your document.

<link href="css/semantic.min.css" rel="stylesheet">
<script src="js/semantic.min.js"></script>

2. Load jQuery library and the jQuery Semantic Editable plugin's script in the document.

<script src="js/semantic.editableRecord.js"></script>

3. Create a data table as follow.

<table id="example1" class="ui table">
      <th name="name" data-notnull="true">Name</th>
      <th name="registrationDate">Registration Date</th>
      <th name="email">E-mail address</th>
      <th name="plan" data-notnull="true">Premium Plan</th>
    <tr id="1">
      <td>John Lilki</td>
      <td data-type="date">2013-09-14</td>
      <td data-type="email">[email protected]</td>
      <td data-type="checkbox" data-checked="Yes" data-unchecked="No">No</td>
    <tr id="2">
      <td>Jamie Harington</td>
      <td data-type="date">2014-01-11</td>
      <td data-type="email">[email protected]</td>
      <td data-type="checkbox" data-checked="Yes" data-unchecked="No">Yes</td>
    <tr id="3">
      <td>Jill Lewis</td>
      <td data-type="date">2014-11-03</td>
      <td data-type="email">[email protected]</td>
      <td data-type="checkbox" data-checked="Yes" data-unchecked="No">Yes</td>

4. Initialize the data table.

  idName: '<your id name>',
  saveUrl:'<your url to save the data>',
  deleteUrl: '<your url to delete the data>'

5. All the default settings.

idName: null,
multiple: true,
addable: true,

saveButton: '<div name="save" class="ui primary button">Save</div>',
cancellButton: '<div name="cancel" class="ui button">Cancel</div>',
newButton: '<div class="ui positive button">New</div>',
deleteButton: '<div class="ui icon button"><i class="trash icon"></i></div>',
detailButton: '<div class="ui icon button"><i class="unordered list icon"></i></div>',
orButton: '<div class="or"></div>',
buttonGroup: '<div class="ui buttons"></div>',

createUrl: null,
updateUrl: null,
saveUlr: null,
deleteUrl: null,

preCreate: jQuery.noop,
preUpdate: jQuery.noop,
preSave: jQuery.noop,
preDelete: jQuery.noop,
postCreate: jQuery.noop,
postUpdate: jQuery.noop,
postSave: jQuery.noop,
postDelete: jQuery.noop,
detailButtonClicked: jQuery.noop,
errorHandler: jQuery.noop

Change logs:


  • fixed select and add color input type


  • add addable, uncap fields with no name attribute, detail button and detail button clicked event.


  • add select type plugin and improve the template copy


  • fixed when error occur in update, new button still loading


  • fixed save record is not correct


  • allows to get row template from thead

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