Dynamic Table Operation Plugin With jQuery - Tabullet

Tabullet is a simple, lightweight jQuery plugin which provides basic table operations (add / delete / edit rows) on your html table. Compatible with Bootstrap's table & button styles.

How to use it:

1. Include the Bootstrap's style sheet in the head section of the webpage (OPTIONAL).

<link rel="stylesheet" href="bootstrap.min.css">

2. Include jQuery library and the jQuery tabullet plugin at the bottom of the webpage.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="dist/Tabullet.js"></script>

3. The html structure for the dynamic table.

<table class="table table-hover" id="table">
  <thead>
  <tr data-tabullet-map="id">
    <th width="50" data-tabullet-map="_index" data-tabullet-readonly="true">
        No
    </th>
    <th data-tabullet-map="name">Nama</th>
    <th data-tabullet-map="level">Level</th>
    <th width="50" data-tabullet-type="edit"></th>
    <th width="50" data-tabullet-type="delete"></th>
  </tr>
  </thead>
</table>

4. Insert your custom data into the table.

var source = [
    {id: 1, name: "Aditya Purwa", level: "Admin"},
    {id: 2, name: "Aditya Avaga", level: "Manager"},
    {id: 101, name: "Aditya Myria", level: "User"},
    {id: 102, name: "Lucent Serentia", level: "LOD"},
    {id: 103, name: "Hayden Bapalthiel", level: "King"},
];

5. Initialize the plugin.

$("#table").tabullet({
  data: source,
});

6. All configuration options for the plugin.

$("#table").tabullet({
  rowClass: '',
  columnClass: '',
  tableClass: 'table',
  textClass: 'form-control',
  editClass: 'btn btn-default',
  deleteClass: 'btn btn-danger',
  saveClass: 'btn btn-success',
  deleteContent: 'Delete',
  editContent: 'Edit',
  saveContent: 'Save',
  action: function () {
  }
});

---

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