Performant Knowledge Desk Plugin With jQuery – dgtable

dgtable is a performant, customizable, dynamic knowledge desk jQuery plugin for presenting massive knowledge set in a sortable, filterable, scrollable, and draggable desk view.

Options:

• Click on desk headers to kind columns.
• Drag desk headers to maneuver & resize columns.
• Helps for digital scroll, which implies solely the seen rows are rendered.
• Permits you to dynamically insert tabular knowledge to the desk.
• A number of API strategies and occasion handlers.

Desk Of Contents:

use it:

1. Set up and construct.

$ npm set up

2. Place the jquery.dgtable.umd.js JavaScript library after loading the most recent 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 knowledge as follows.

var desk = 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%'}
    ],
    peak: 500,
    width: DGTable.Width.SCROLL // or DGTable.Width.AUTO, DGTable.Width.NONE
});

4. Append the information desk to a container component.

<div id="instance"></div>

$('#instance').append(desk.el);

5. Add tabular knowledge to the information desk.

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

desk.render().addRows(sampleData);

6. All doable configuration choices.

var desk = new DGTable({

    // column choices
    columns: [
      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
      
    ],

    // peak of the information desk
    peak: 500,

    // width of the information desk
    // or DGTable.Width.AUTO, DGTable.Width.NONE
    width: DGTable.Width.SCROLL,

    // work in digital mode or not
    // which implies solely the seen rows are rendered
    virtualTable: true,

    // allow resizable columns
    resizableColumns: true,

    // allow draggable columns
    movableColumns: true,

    // variety of columns you possibly can kind, one after one other?
    sortableColumns: 1,

    // auto modify the column width for kind arrow
    adjustColumnWidthForSortArrow: true,

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

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

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

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

    // further cell lessons
    cellClasses: '',

    // String|String[]|COLUMN_SORT_OPTIONS|COLUMN_SORT_OPTIONS[]
    // Generally is a column or an array of columns.
    // Every column is a String or a COLUMN_SORT_OPTIONS:
    // column: String Column title
    // descending: Boolean=false Is that this column sorted in descending order?
    sortColumn: '',

    // buffer dimension for digital desk
    rowsBufferSize: 10,

    // minimal column width
    minColumnWidth: 35,

    // width of resize space
    resizeAreaWidth: 8,

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

    // desk class
    tableClassName: 'dgtable',

    // present a preview of the total content material
    allowCellPreview: true,
    allowHeaderCellPreview: true,
    cellPreviewAutoBackground: true,
    cellPreviewClassName: 'dgtable-cell-preview',

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

    // non-obligatory component
    el: null,

    // return the HTML for the cell
    cellFormatter: operate(worth, columnName, rowData){
     
    },

    // return the HTML for the cell's header
    headerCellFormatter: operate(worth, columnName){
      
    },

    // customized desk filter operate
    filter: operate(row, args){
      
    },

});

7. API strategies.

// for occasions
desk.on(eventName, {Operate?} callback);
desk.as soon as(eventName, {Operate?} callback);
desk.off(eventName, {Operate?} callback);

// render the desk
desk.render();

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

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

// add columns
desk.addColumn({COLUMN_OPTIONS} columnData, Quantity earlier than = -1, {Boolean} render = true);

// take away columns
desk.removeColumn({String} column, {Boolean} render = true);

// set a brand new filter operate
desk.setFilter({Operate(row: Object, args: Object): Boolean} filterFunc);

// set a brand new cell formatter
desk.setCellFormatter(null formatter);
desk.setHeaderCellFormatter(null formatter);

// filter seen rows
desk.filter({Object} args);
// or
desk.filter({{column: String, key phrase: String, caseSensitive: Boolean}} args);

// clear filter
desk.clearFilter();

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

// transfer columns
desk.moveColumn(Quantity src, Quantity dest, visibleOnly = true);

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

// resort the desk
desk.resort();

// set seen columns
desk.setColumnVisible({String} column, {Boolean} seen);

// verify if the column is seen
desk.isColumnVisible({String} column, {Boolean} seen);

// set/get minimal column width
desk.setMinColumnWidth({Quantity} minColumnWidth);
desk.getMinColumnWidth();

// set/get sortable columns
desk.setSortableColumns({Quantity} sortableColumns);
desk.getSortableColumns();

// get headerRow's component
desk.getHeaderRowElement()

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

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

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

// set/get column width
desk.setColumnWidth({String} column, String width);
desk.getColumnWidth({String} column);

// get column configs
desk.getColumnConfig({String} column title);
desk.getColumnsConfig();

// get sorted columns
desk.getSortedColumns()

// get component of speficied row
desk.getHtmlForRowCell(row: Quantity, columnName: String);

// get component of speficied cell
desk.getHtmlForRowDataCell(rowData: Object, columnName: String) null

// get knowledge of specified row
desk.getDataForRow(row: Quantity);

// get variety of rows
desk.getRowCount();

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

// get variety of filtered rows
desk.getFilteredRowCount();

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

// get knowledge of filtered rows
desk.getDataForFilteredRow(row: Quantity);

// get row component
desk.getRowElement(physicalRowIndex: Quantity);

// get Y positon of row
desk.getRowYPos(physicalRowIndex: Quantity);

// verify if the width/peak has modified
desk.tableWidthChanged();
desk.tableHeightChanged();

// add rows
desk.addRows({Object[]} knowledge, {Quantity} at = -1, {Boolean} resort = false, {Boolean} render = true)

// refresh all digital rows
desk.refreshAllVirtualRows();

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

// get URL of component
desk.getUrlForElementContent({string} id);

// for internet employee
desk.isWorkerSupported() {Boolean};
desk.createWebWorker({string} url);
desk.unbindWebWorker({Employee} employee);

// conceal cell preview
desk.hideCellPreview();

// destroy the occasion
desk.shut();

8. Occasion handlers.

desk.on('renderskeleton', operate(){
  // do one thing
});

desk.on('render', operate(){
  // do one thing
});

desk.on('cellpreview', operate(PreviewDOM, RowIndex, ColumnName, RowData, CellDOM){
  // do one thing
});

desk.on('cellpreviewdestroy', operate(PreviewDOM, RowIndex, ColumnName, RowData, CellDOM){
  // do one thing
});

desk.on('headerrowcreate', operate(RowDOM){
  // do one thing
});

desk.on('headerrowdestroy', operate(RowDOM){
  // do one thing
});

desk.on('rowcreate', operate(RowIndexInFilteredData, RowIndexInData, RowDOM, RowData){
  // do one thing
});

desk.on('rowdestroy', operate(RowDOM){
  // do one thing
});

desk.on('addrows', operate(quantity, RemoveOldRows?){
  // do one thing
});

desk.on('addcolumn', operate(ColumnName){
  // do one thing
});

desk.on('removecolumn', operate(ColumnName){
  // do one thing
});

desk.on('movecolumn', operate(ColumnName, FromIndex, ToIndex){
  // do one thing
});

desk.on('showcolumn', operate(ColumnName){
  // do one thing
});

desk.on('hidecolumn', operate(ColumnName){
  // do one thing
});

desk.on('columnwidth', operate(ColumnName, OldWidth, NewWidth){
  // do one thing
});

desk.on('filter', operate(choices){
  // do one thing
});

desk.on('filterclear', operate(){
  // do one thing
});

desk.on('kind', operate(ArrayOfSortConstructs){
  // do one thing
});

desk.on('headercontextmenu', operate(ColumnName, pageX, pageY, BoundsOfTheHeaderCell){
  // do one thing
});

Changelog:

2024-10-14

2023-11-30

2023-01-12

• v0.6.10: [feature] allowCancelSort

2022-12-26

2022-12-04

2022-11-22

2022-11-20

• v0.6.6: [fix] restore default conduct of refreshRow to right away render modifications

2022-11-17

• v0.6.5: [fix] allowCellPreview setting was no handled appropriately since digital desk help

2022-11-08

2022-11-07

• v0.6.1: auto estimate estimatedRowHeight by default

2022-10-13

• v0.5.59: corrected single sortColumn possibility help

2022-05-18

• v0.5.58: [fix] don’t set off occasions after destroy

2022-04-03

• v0.5.57: [fix] preview cell ought to inherit cursor model

2022-03-28

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

2022-03-16

• v0.5.55: [fix] keep away from index corruption when trigerring rowclick

This superior jQuery plugin is developed by danielgindi. For extra Superior Usages, please verify the demo web page or go to the official web site.