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.

Features:

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

myGrid.render();

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.