High-Performance jQuery Table For Web Applications | dgtable

dgtable is a powerful, customizable, and dynamic jQuery spreadsheet extension for rendering a large data set in a sortable, filter, scroll, and drag table view.


  • Click the table headers to sort the columns.
  • Drag the table headers to move and resize the columns.
  • Supports default scrolling, which means only visible rows are displayed.
  • It allows you to insert dynamically tabular data into the table.
  • Lots of API methods and event handlers.

How to make use of it:

1. Install and build.

$ npm install

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

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

3. Create a brand new DGTable occasion and outline 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 information table to a container factor.

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

5. Add tabular data to the information 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 attainable configuration choices.

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,

    // 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 strategies.

// for events
table.on(eventName, {Function?} callback);
table.once(eventName, {Function?} callback);
table.off(eventName, {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

Performant Data Table Plugin, jquery.dgtable Github

See Demo And Download

Official Website(danielgindi): Click Here

This superior jQuery/javascript plugin is developed by danielgindi. For extra Advanced Usages, please go to the official website.

Related Posts


Simple And Powerful Fullscreen Lightbox Plugin | fslightbox

Fullscreen Lightbox Basic is a modern and handy plug-in for displaying photos and videos in a clean overlay box. Showcase a single source or create a great…


Product Thumbnail Slider With Positive Zoom Effect jQuery

Positive Zoom is a JavaScript library for creating an image gallery where you can zoom in on the current image by hovering over it. Must Read: Pure…


Create Responsive Gauge Meter Using Pure CSS | CSSGauge

Pure CSS Gauge Meter Component, no SVG, or artboard is used in this component. This component can be easily distinguished by overriding the default style rules and…


Versatile Date and Time Picker Calendar for Bulma

Bulma extension for calendar display can be used on a page as a large calendar with appointments or as a date picker/popup window. A responsive, customizable, and…


Simple Time-Series Chart Viewer with HTML5 Canvas Javascript Library

Pixl chart library displays time series charts in the browser, using the HTML5 Canvas element. It is designed to be lightweight and efficient, while still providing a…


Neumorphic Design Inspiration Style CSS Shapes | Neumorphism

Multi-dimensional design is inspired by the physical world and adds textures, reflection, shadows, layers, and depths to the flat design making the UI elements more visible. CSS…