Performant Data Table Plugin With jQuery - dgtable

File Size: 816 KB
Views Total: 2601
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Performant Data Table Plugin With jQuery - dgtable

dgtable is a performant, customizable, dynamic data table jQuery plugin for presenting large data set in a sortable, filterable, scrollable, and draggable table view.


  • Click table headers to sort columns.
  • Drag table headers to move & resize columns.
  • Supports for virtual scroll, which means only the visible rows are rendered.
  • Allows you to dynamically insert tabular data to the table.
  • Lots of API methods and event handlers.

Table Of Contents:

How to use it:

1. Install and build.

$ npm install

2. Place the jquery.dgtable.umd.js JavaScript library after loading the latest jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquery.dgtable.umd.js"></script>

3. Create a new DGTable instance and define the column data as follows.

var table = new DGTable({
    columns: [
      {name: 'first', label: 'Locked column', movable: false, resizable: false},
      {name: 'last', label: 'Test data', width: '30%'},
      {name: 'address', label: 'More', width: '30%'},
      {name: 'city', label: 'Example', width: '40%'}
    height: 500,
    width: DGTable.Width.SCROLL // or DGTable.Width.AUTO, DGTable.Width.NONE

4. Append the data table to a container element.

<div id="example"></div>

5. Add tabular data to the data table.

var sampleData = [
    { first: 'Pearl', last: 'Button', address: '69 Hendford Hill', city: 'MOSS-SIDE' },
    { first: 'Daisy', last: 'Brockhouse', address: '4667 rue Levy', city: 'Montreal' },
    { first: 'Asphodel', last: 'Goodchild', address: '74 New Dover Rd', city: 'WALPOLE ST ANDREW' },
    { first: 'Primrose', last: 'Oldbuck', address: '1331 Sherwood Circle', city: 'Lafayette' },
    { first: 'Savanna', last: 'Took', address: '4200 Penn Street', city: 'Stlouis' },
    // ...

6. All possible configuration options.

var table = new DGTable({

    // column options
    columns: [
        width: '30%', // Number|String
        name: 'Column Name', 
        label: 'Column Label', 
        sortable: true,
        movable: true, 
        resizable: true,
        visible: true,
        cellClasses: '', // additional CSS Class
        ignoreMin: false, // ignore the minimum width
        comparePath: dataPath // path to the data to use for comparison

    // height of the data table
    height: 500,

    // width of the data table
    // or DGTable.Width.AUTO, DGTable.Width.NONE
    width: DGTable.Width.SCROLL,

    // work in virtual mode or not
    // which means only the visible rows are rendered
    virtualTable: true,

    // enable resizable columns
    resizableColumns: true,

    // enable draggable columns
    movableColumns: true,

    // number of columns you can sort, one after another?
    sortableColumns: 1,

    // auto adjust the column width for sort arrow
    adjustColumnWidthForSortArrow: true,

    // auto grow/shrink the relative width to fill the table's width
    relativeWidthGrowsToFillWidth: true,
    relativeWidthShrinksToFillWidth: false,

    // auto convert auto-width columns to relative width
    convertColumnWidthsToRelative: false,

    // auto fill the table's width
    autoFillTableWidth: false,

    // when setting true, the sorting arrows will have 3 modes - asc, desc, and cancelled.
    allowCancelSort: true,

    // additional cell classes
    cellClasses: '',

    // Can be a column or an array of columns.
    // Each column is a String or a COLUMN_SORT_OPTIONS:
    // column: String Column name
    // descending: Boolean=false Is this column sorted in descending order?
    sortColumn: '',

    // buffer size for virtual table
    rowsBufferSize: 10,

    // minimum column width
    minColumnWidth: 35,

    // width of resize area
    resizeAreaWidth: 8,

    // CSS class of resizer
    resizerClassName: 'dgtable-resize',

    // table class
    tableClassName: 'dgtable',

    // show a preview of the full content
    allowCellPreview: true,
    allowHeaderCellPreview: true,
    cellPreviewAutoBackground: true,
    cellPreviewClassName: 'dgtable-cell-preview',

    // wrapper class
    className: 'dgtable-wrapper',

    // optional element
    el: null,

    // return the HTML for the cell
    cellFormatter: function(value, columnName, rowData){

    // return the HTML for the cell's header
    headerCellFormatter: function(value, columnName){

    // custom table filter function
    filter: function(row, args){


7. API methods.

// for events
table.on(eventName, {Function?} callback);
table.once(eventName, {Function?} callback);, {Function?} callback);

// render the table

// clear and render
table.clearAndRender({Boolean} render = true);

// set columns
table.setColumns({COLUMN_OPTIONS[]} columns, {Boolean} render = true);

// add columns
table.addColumn({COLUMN_OPTIONS} columnData, {String|Number} before = -1, {Boolean} render = true);

// remove columns
table.removeColumn({String} column, {Boolean} render = true);

// set a new filter function
table.setFilter({Function(row: Object, args: Object): Boolean} filterFunc);

// set a new cell formatter
table.setCellFormatter({Function(value: *, columnName: String, row: Object):String|null} formatter);
table.setHeaderCellFormatter({Function(label: String, columnName: String):String|null} formatter);

// filter visible rows
table.filter({Object} args);
// or
table.filter({{column: String, keyword: String, caseSensitive: Boolean}} args);

// clear filter

// set column label
table.setColumnLabel({String} column, {String} label);

// move columns
table.moveColumn({String|Number} src, {String|Number} dest, visibleOnly = true);

// sort columns
table.sort({String?} column, {Boolean?} descending, {Boolean=false} add)

// resort the table

// set visible columns
table.setColumnVisible({String} column, {Boolean} visible);

// check if the column is visible
table.isColumnVisible({String} column, {Boolean} visible);

// set/get minimum column width
table.setMinColumnWidth({Number} minColumnWidth);

// set/get sortable columns
table.setSortableColumns({Number} sortableColumns);

// get headerRow's element

// set/get movable columns
table.setMovableColumns({Boolean} movableColumns);

// set/get resizable columns
table.setResizableColumns({Boolean} resizableColumns);

// set comparator callback
table.setComparatorCallback({Function(String,Boolean)Function(a,b)Boolean} comparatorCallback);

// set/get column width
table.setColumnWidth({String} column, {Number|String} width);
table.getColumnWidth({String} column);

// get column configs
table.getColumnConfig({String} column name);

// get sorted columns

// get element of speficied row
table.getHtmlForRowCell(row: Number, columnName: String);

// get element of speficied cell
table.getHtmlForRowDataCell(rowData: Object, columnName: String) {string|null}

// get data of specified row
table.getDataForRow(row: Number);

// get number of rows

// get row index
table.getIndexForRow(row: Object);

// get number of filtered rows

// get index of  filtered rows
table.getIndexForFilteredRow(row: Object);

// get data of filtered rows
table.getDataForFilteredRow(row: Number);

// get row element
table.getRowElement(physicalRowIndex: Number);

// get Y positon of row
table.getRowYPos(physicalRowIndex: Number);

// check if the width/height has changed

// add rows
table.addRows({Object[]} data, {Number} at = -1, {Boolean} resort = false, {Boolean} render = true)

// refresh all virtual rows

// reset rows
table.setRows(data: Object[], resort: Boolean=false)

// get URL of element
table.getUrlForElementContent({string} id);

// for web worker
table.isWorkerSupported() {Boolean};
table.createWebWorker({string} url);
table.unbindWebWorker({Worker} worker);

// hide cell preview

// destroy the instance

8. Event handlers.

table.on('renderskeleton', function(){
  // do something

table.on('render', function(){
  // do something

table.on('cellpreview', function(PreviewDOM, RowIndex, ColumnName, RowData, CellDOM){
  // do something

table.on('cellpreviewdestroy', function(PreviewDOM, RowIndex, ColumnName, RowData, CellDOM){
  // do something

table.on('headerrowcreate', function(RowDOM){
  // do something

table.on('headerrowdestroy', function(RowDOM){
  // do something

table.on('rowcreate', function(RowIndexInFilteredData, RowIndexInData, RowDOM, RowData){
  // do something

table.on('rowdestroy', function(RowDOM){
  // do something

table.on('addrows', function(number, RemoveOldRows?){
  // do something

table.on('addcolumn', function(ColumnName){
  // do something

table.on('removecolumn', function(ColumnName){
  // do something

table.on('movecolumn', function(ColumnName, FromIndex, ToIndex){
  // do something

table.on('showcolumn', function(ColumnName){
  // do something

table.on('hidecolumn', function(ColumnName){
  // do something

table.on('columnwidth', function(ColumnName, OldWidth, NewWidth){
  // do something

table.on('filter', function(options){
  // do something

table.on('filterclear', function(){
  // do something

table.on('sort', function(ArrayOfSortConstructs){
  // do something

table.on('headercontextmenu', function(ColumnName, pageX, pageY, BoundsOfTheHeaderCell){
  // do something



  • v0.6.11: bugfix


  • v0.6.10: [feature] allowCancelSort


  • v0.6.9: bugfix


  • v0.6.8: bugfix


  • v0.6.7: bugfix


  • v0.6.6: [fix] restore default behavior of refreshRow to immediately render changes


  • v0.6.5: [fix] allowCellPreview setting was no treated correctly since virtual table support


  • v0.6.3: bugfix


  • v0.6.1: auto estimate estimatedRowHeight by default


  • v0.5.59: corrected single sortColumn option support


  • v0.5.58: [fix] do not trigger events after destroy


  • v0.5.57: [fix] preview cell should inherit cursor style


  • v0.5.56: [fix] emit rowclick events from cell preview


  • v0.5.55: [fix] avoid index corruption when trigerring rowclick

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