Spreadsheet-style Data Table Plugin For jQuery - Dynamic Table

A dynamic, AJAX-driven, Spreadsheet-style data table plugin with jQuery that features filtering, sorting, cell editing, performant scrolling and more.

How to use it:

1. Load the needed jQuery JavaScript library together with the jQuery Dynamic Table plugin's files in your html document.

<link rel="stylesheet" href="dynamic-table.jquery.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="dynamic-table.jquery.js"></script>
<script src="dynamic-table-editor.jquery.js"></script>

2. Load the OPTIONAL jQuery UI and moment.js libraries for date filtering by date and time.

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

3. Create an empty container to place the generated data table.

<div id="data-grid">
</div>  

4. Initialize the dynamic table plugin.

$("#data-grid").dynamicTable({
  fillParent : false,
  showCounter: true,
  changeColumns: true,
  listChange : function() {
     var myCounts = $("#sample-grid").dynamicTable("counts");
     $("#counts").text("Total: " + myCounts.total + " Filtered: " + myCounts.filtered);
  },
});

5. Define your own tabular data. This would usually be done in an AJAX call ($.getJSON) but for demo purposes we show hardcoded data.

var myData =[  

   {  
      id:10001,
      name:"Bill Smith",
      birthDate:new Date(1956,
      3,
      12      ).getTime(),
      country:"United States",
      state:"Texas",
      note:"Test",
      language:"English"
   },
   {  
      id:10002,
      name:"Michael Jones",
      birthDate:new Date(1975,
      7,
      23      ).getTime(),
      country:"United States",
      state:"Florida",
      language:"English"
   },
   {  
      id:10003,
      name:"Heinz Mayer",
      birthDate:new Date(1972,
      8,
      2      ),
      country:"Germany",
      state:"Bayern",
      language:"German"
   },
   
   ...

];

6. Define columns.

var myColumns =[  
   {  
      // Hidden Identifier column 
      name:"Identifier",
      type:"number",
      visible:false,
      field:"id",

   },
   {  
      // Searchable text column 
      name:"Name",
      type:"string",
      visible:true,
      filterType:"search",
      width:200,
      field:"name",
      // <== When providing objects as rows make sure to set the field to be the attribute to be displayed in that column
   },
   {  
      // Date column with date filter 
      name:"Birth Date",
      type:"date",
      visible:true,
      format:"d-MMM-YYYY",
      filterType:"dateRange",
      cssClass:function (aColumn,
      aValue,
      aDisplayValue)      {  
         return aValue != null  ? "has-birth-date":null
      },
      field:"birthDate",

   },
   {  
      // Limited values with default picklist filter  
      name:"Country",
      type:"string",
      visible:true,
      field:"country",

   },
   {  
      name:"State",
      type:"string",
      visible:true,
      field:"state",

   },
   {  
      name:"Note",
      type:"string",
      visible:true,
      field:"note",
      editor:$("<div/>").dynamicTableEditor(      {  
         editHandler:function(aData,
         aContext)         {  
            $("#save-data").html("Saving note:<strong>" + aData + "</strong>");
         }
      }      )
   },
   {  
      name:"Language",
      type:"string",
      visible:true,
      field:"language",

   }
];

7. Load the data into the grid. Done.

$("#data-grid").dynamicTable("data", myData, myColumns);

8. Plugin's default settings.

$("#data-grid").dynamicTable({
  fillParent        : true,
  rowHeight         : 35,
  pageSize          : 50,
  pageBuffer        : 1,
  showCounter       : false,
  showCheck         : false,
  changeColumns     : false,
  settingsHandler   : $.fn.dynamicTable.defaultSettingsHandler()
});

9. API methods.

// clears all filters
$("#data-grid").dynamicTable('clearAllFilters');

// returns an object with basic counts of the data in the table. 
// total: All records loaded into the table
// filtered: The amount of records currently visible based on the selected filter
$("#data-grid").dynamicTable('counts', total, filtered);

10. Possible event handlers.

$("#data-grid").on("rowSelect", function(aEvent) {
  // ...
});  

$("#data-grid").on("rowDoubleClick", function(aEvent) {
  // ...    
});  

Changelog:

2018-08-05

• Fix column show/hide caching issue

2018-05-06

• Add parameter for row height

2018-03-12

• Allow selecting of text in editor field

---

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