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.

Features:

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

• Initialization
• Options
• Methods
• Events
• More Data Table Plugins

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>

$('#example').append(table.el);

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' },
    // ...
]

table.render().addRows(sampleData);

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: '',

    // String|String[]|COLUMN_SORT_OPTIONS|COLUMN_SORT_OPTIONS[]
    // 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);
table.off(eventName, {Function?} callback);

// render the table
table.render();

// 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
table.clearFilter();

// 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
table.resort();

// 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);
table.getMinColumnWidth();

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

// get headerRow's element
table.getHeaderRowElement()

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

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

// 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);
table.getColumnsConfig();

// get sorted columns
table.getSortedColumns()

// 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
table.getRowCount();

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

// get number of filtered rows
table.getFilteredRowCount();

// 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
table.tableWidthChanged();
table.tableHeightChanged();

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

// refresh all virtual rows
table.refreshAllVirtualRows();

// 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
table.hideCellPreview();

// destroy the instance
table.close();

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
});

Changelog:

2024-10-14

• v0.6.17: bugfix

2023-11-30

• v0.6.11: bugfix

2023-01-12

• v0.6.10: [feature] allowCancelSort

2022-12-26

• v0.6.9: bugfix

2022-12-04

• v0.6.8: bugfix

2022-11-22

• v0.6.7: bugfix

2022-11-20

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

2022-11-17

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

2022-11-08

• v0.6.3: bugfix

2022-11-07

• v0.6.1: auto estimate estimatedRowHeight by default

2022-10-13

• v0.5.59: corrected single sortColumn option support

2022-05-18

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

2022-04-03

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

2022-03-28

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

2022-03-16

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