Spreadsheet-style Data Table Plugin For jQuery - Dynamic Table

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.

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) {
  // ...    
});  

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

  • Publication date: 17.12.2017
  • Source