Dynamic CRUD Data Grid Plugin With jQuery - Quickgrid

Quickgrid is a simple yet powerful jQuery data grid plugin which dynamically parses and presents your JSON data (or JS arrays/objects) in a filterable, editable, sortable and paginatable CRUD data table.

How to use it:

1. To get stated, insert the minified version of the jQuery Quickgrid plugin after jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="quickgrid.min.js"></script>

2. Create a container element for the data grid.

<div id="myGrid"></div>

3. Initialize the data grid and define you own data as these:

$("#myGrid").quickGrid({
  data: [
    {
      property1: "01.02.2017",
      property2: ""
    },
    {
      property2: "100",
      property1: "02.02.2017"
    },
    {
      property2: "10",
      property1: "03.02.2017",
      property3: ""
    }
  ],
  columns: {
    property1 : {
      visible: false,
      title: "Date"
    },
    property2 : {
      title: function(key){
        return "!!!" + key.charAt(0).toUpperCase() + key.substring(1)  + "!!!";
      }
    }
  },
})

4. To load an external JSON file into the data grid:

$.getJSON("json.json", function(data){
  $('<div></div>').appendTo('body').quickGrid({
    data: data,
    columns: {
      year: {
        visible: false
      },
      age: {
        visible: false
      }
    }
  });
})  

5. To load an external JSON file into the data grid:

$.getJSON("json.json", function(data){
  $('<div></div>').appendTo('body').quickGrid({
    data: data,
    columns: {
      year: {
        visible: false
      },
      age: {
        visible: false
      }
    }
  });
})  

6. Config the pagination control of the data grid:

$("#myGrid").quickGrid({
  pagination: {
    recordsPerPage: 10, // max records per page
    activePage: 0 // initial page
  }
})

7. Callback functions available.

$("#myGrid").quickGrid({

  onaddrowclick: function () {

    var rowDataToAdd = {};

    quickGrid.settings.data.forEach((rowData) => {
        for (var prop in rowData) {
            if (!rowDataToAdd.hasOwnProperty(prop)) {
                rowDataToAdd[prop] = "";
            }
        }
    });

    var modal = new QuickModal($('body')[0], rowDataToAdd,
        {
            title: "Add Record",
            onsubmit: (objData) => quickGrid.addRow(objData)
        });
  },

  onrowclick: function (rowdata, rownum) {
    var modal = new QuickModal($('body')[0], rowdata,
        {
            title: "Edit Record",
            onsubmit: (objData) => quickGrid.updateRow(rownum, objData)
        });
  },

  oneditrowclick: function (rowdata, rownum) {
    var modal = new QuickModal($('body')[0], rowdata,
        {
            title: "Edit Record",
            onsubmit: (objData) => quickGrid.updateRow(rownum, objData)
        });
  },

  onrowdelete: function (rowdata, rownum) {
  }

})

8. Event handlers.

$("#myGrid").quickGrid()

.on('qgrd:updaterow', function(rowData, rowNumber){
  // do something
})

.on('qgrd:addrow', function(rowData){
  // do something
})

---

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