Feature-rich Dynamic Data Grid Plugin - editable-grid

File Size: 94.8 KB
Views Total: 5926
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Feature-rich Dynamic Data Grid Plugin - editable-grid

editable-grid is a jQuery plugin used to dynamically render a complex, multi-functional, CRUD data grid using Bootstrap's table component.


  • Tree table with nesting table rows.
  • Data sorting.
  • Data formatting.
  • Data validation.
  • Data parsing.
  • Data calculation.
  • Row selection.
  • Data inline editing.
  • Fixed table header.
  • Custom class.
  • and more.

Basic usage:

1. The plugin requires jQuery library and Bootstrap framework:

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

2. Load the jQuery editable-grid plugin's files in the html document.

<link rel="stylesheet" href="editable_grid.css">
<script src="bootstrap-editable-grid.js"></script>

3. Create a new data grid with dynamic tabular data as these:

var myGrid = new Grid({
    el: el, // selector
    columns: [ // columns
          id: 'a',
          title: 'a',
          width: '33.3%'
          id: 'b',
          title: 'b',
          width: '33.3%',
          alignment: 'right',
          titleAlignment: 'center'
          id: 'c',
          title: 'c',
          width: '33.3%',
          alignment: 'center',
          titleAlignment: 'right'
    data: [ // tabular data
          id: 'id-1',
          a: 'a',
          b: 'b',
          c: 'c'
          id: 'id-2',
          a: 'a',
          b: 'b',
          c: 'c'

4. Render the data grid on the page.


5. All plugin options to customize the data grid.

var myGrid = new Grid({
    sortConfig: [],
    id: 'id',
    borders: true,
    columns: {
      formatter: formatter,
      parser: parser,
      validate: validate,
      sortable: false,
      sortCompare: null,
      sortType: null,
      nullable: false,
      type: 'text',
      link: null,
      alignment: 'left',
      titleAlignment: 'left',
      classes: [],
      preCreateCallback: function () {
    rows: {
      link: false,
      newRow: false,
      totalRow: false
    stateManager: {
      isEditable: function () {
          return false;
    addListeners: function () {

    treeMode: false,
    childData: function () {
      return $.Deferred().resolve([]);
    launchLinksNewTab: false

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