Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

1. Install it with NPM.

# NPM
$ npm install tabulator --save

2. Load the required JavaScript and CSS files within the HTML web page.

<!-- Core -->
<link href="dist/css/tabulator.min.css" rel="stylesheet">
<script src="dist/js/tabulator.min.js"></script>
<!-- jQuery Wrapper Optional -->
<script src="dist/js/jquery_wrapper.min.js"></script>

3. Create a container to place the generated table.

<div id="myTable"></div>

4. Define your tabular information in an array.

var myData = [
    {id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
    {id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
    {id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
    {id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
    {id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
 ];

5. Generate a primary information table from the info you provide.

var table = new Tabulator("#myTable", {
    data: myData,
    // configuration options here
});

6. All attainable configuration options.

var table = new Tabulator("#myTable", {    
    // height of tabulatorheight: false, 
    // minimum height of tabulator
    minHeight: false, 
    // maximum height of tabulator
    maxHeight: false, 
    // "fitColumns" | "fitData" | "fitDataTable"
    layout: "fitData", 
    // up<a href="#!">date</a> column widths on setData
    layoutColumnsOnNewData: false, 
    // minimum global width for a column
    columnMinWidth: 40, 
    // vertical alignment of column headers
    columnHeaderVertAlign: "top", 
    // resizable columns
    resizableColumns: true, 
    // resizable rows
    resizableRows: false, 
    // auto resize table
    autoResize: true, 
    // column header here
    columns: [], 
    // horizontal alignment
    cellHozAlign: "", 
    // vertical alignment
    cellVertAlign: "",
    // tabular data here
    data: [],
    // auto-build columns from data row structure
    autoColumns: false, 
    // enable data reactivity
    reactiveData: false, 
    // seperatpr for nested data
    nestedFieldSeparator: ".", 
    // enable tooltips
    tooltips: false,
    // enable tooltips on headers
    tooltipsHeader: false,
    // when to generate tooltips
    tooltipGenerationMode: "load", 
    // initial sorting criteria
    initialSort: false, 
    // initial filtering criteria
    initialFilter: false, 
    // initial header filtering criteria
    initialHeaderFilter: false, 
    // multiple or single column sorting
    columnHeaderSortMulti: true,
    // reverse internal sort ordering
    sortOrderReverse: false, 
    // set default global header sort
    headerSort: true, 
    // set default tristate header sorting
    headerSortTristate: false, 
    // hold footer element
    footerElement: false, 
    // filed for row index
    index: "id", 
    // array for keybindings
    keybindings: [], 
    // create new row when tab to end of table
    tabEndNewRow: false, 
    // allow toggling of invalid option warnings
    invalidOptionWarnings: true, 
    // enable clipboard
    clipboard: false, 
    // formatted table data
    clipboardCopyStyled: true, 
    // clipboard config
    clipboardCopyConfig: {
      columnHeaders:false, //do not include column headers in clipboard output
      columnGroups:false, //do not include column groups in column headers for printed table
      rowGroups:false, //do not include row groups in clipboard output
      columnCalcs:false, //do not include column calculation rows in clipboard output
      dataTree:false, //do not include data tree in printed table
      formatCells:false, //show raw cell values without formatter
    },
    // restrict clipboard to visible rows only
    clipboardCopyRowRange: "active", 
    // convert pasted clipboard data to rows
    clipboardPasteParser: "table", 
    // how to insert pasted data into the table
    clipboardPasteAction: "insert", 
    // data has been copied to the clipboard
    clipboardCopied: function clipboardCopied() {}, 
    // data has been pasted into the table
    clipboardPasted: function clipboardPasted() {}, 
    // data has not successfully been pasted into the table
    clipboardPasteError: function clipboardPasteError() {}, 
    // function to manipulate table data before it is downloaded
    downloadDataFormatter: false, 
    // function to manipulate download data
    downloadReady: function downloadReady(data, blob) {
      return blob;
    }, 
    // function to manipulate download data
    downloadComplete: false, 
    // download configs
    downloadConfig: {
      columnHeaders:false, //do not include column headers in downloaded table
      columnGroups:false, //do not include column groups in column headers for downloaded table
      rowGroups:false, //do not include row groups in downloaded table
      columnCalcs:false, //do not include column calcs in downloaded table
      dataTree:false, //do not include data tree in downloaded table
    }, 
    // restrict download to active rows only
    downloadRowRange: "active", 
    // enable data tree
    dataTree: false, 
    dataTreeElementColumn: false,
    // show data tree branch element
    dataTreeBranchElement: true, 
    //data tree child indent in px
    dataTreeChildIndent: 9, 
    //data tree column field to look for child rows
    dataTreeChildField: "_children", 
    // data tree row collapse element
    dataTreeCollapseElement: false, 
    // data tree row expand element
    dataTreeExpandElement: false, 
    // data tree start expand element
    dataTreeStartExpanded: false,
    // row has been expanded
    dataTreeRowExpanded: function dataTreeRowExpanded() {}, 
    // row has been collapsed
    dataTreeRowCollapsed: function dataTreeRowCollapsed() {}, 
    // include visible data tree rows in column calculations
    dataTreeChildColumnCalcs: false, 
    // seleccting a parent row selects its children
    dataTreeSelectPropagate: false, 
    // enable print as html
    printAsHtml: false, 
    // print formatter
    printFormatter: false, 
    // page header
    printHeader: false, 
    // page footer
    printFooter: false, 
    // enable styles while priting
    printStyled: true, //enable print as html styling
    // restrict print to visible rows only
    printRowRange: "visible", 
    // print configs
    printConfig: {
      columnHeaders:false, //do not include column headers in printed table
      columnGroups:false, //do not include column groups in column headers for printed table
      rowGroups:false, //do not include row groups in printed table
      columnCalcs:false, //do not include column calcs in printed table
      dataTree:false, //do not include data tree in printed table
      formatCells:false, //show raw cell values without formatter
    }, 
    // or 'top'
    addRowPos: "bottom",
    // highlight rows on hover
    selectable: "highlight", 
    // highlight rows on hover
    selectableRangeMode: "drag", 
    // roll selection once maximum number of selectable rows is reached
    selectableRollingSelection: true, 
    // maintain selection when table view is updated
    selectablePersistence: true, 
    // check wheather row is selectable
    selectableCheck: function selectableCheck(data, row) {
      return true;
    }, 
    // delay before updating column after user types in header filter
    headerFilterLiveFilterDelay: 300, 
    // placeholder text to display in header filters
    headerFilterPlaceholder: false,
    // hide header
    headerVisible: true, 
    // enable edit history
    history: false,
    // current system language
    locale: false, 
    langs: {
      "en":{
        "pagination":{
          "all":"All",
        }
      },
    },
    // enable virtual DOM
    virtualDom: true, 
    // set virtual DOM buffer size
    virtualDomBuffer: 0, 
    // key for persistent storage
    persistenceID: "", 
    // mode for storing persistence information
    persistenceMode: true, 
    // function for handling persistence data reading
    persistenceReaderFunc: false, 
    // function for handling persistence data writing
    persistenceWriterFunc: false, 
    // enable persistence
    persistence: false,
    // enable responsive layout
    responsiveLayout: false, 
    // show collapsed data on start
    responsiveLayoutCollapseStartOpen: true, 
    // collapse formatter
    responsiveLayoutCollapseUseFormatters: true, 
    // responsive layout collapse formatter
    responsiveLayoutCollapseFormatter: false, 
    // set pagination type: "remote", or "local"
    pagination: false, 
    // number of rows per page
    paginationSize: false, 
    // initial page on page load
    paginationInitialPage: 1,
    // set count of page button
    paginationButtonCount: 5, 
    // add pagination size selector element
    paginationSizeSelector: false, 
    // element to hold pagination numbers
    paginationElement: false,
    // pagination data sent to the server
    paginationDataSent: {}, 
    // pagination data received from the server
    paginationDataReceived: {}, 
    // add rows on table or page
    paginationAddRow: "page", 
    // url for ajax loading
    ajaxURL: false, 
    ajaxURLGenerator: false,
    // params for ajax loading
    ajaxParams: {}, 
    // ajax request type
    ajaxConfig: "get", 
    // ajax request type
    ajaxContentType: "form", 
    // promise function
    ajaxRequestFunc: false, 
    // show loader
    ajaxLoader: true, 
    // loader element
    ajaxLoaderLoading: false, 
    // loader element
    ajaxLoaderError: false, 
    ajaxFiltering: false,
    ajaxSorting: false,
    // progressive loading
    ajaxProgressiveLoad: false, 
    // delay between requests
    ajaxProgressiveLoadDelay: 0, 
    // margin before scroll begins
    ajaxProgressiveLoad<a href="#!">Scroll</a>Margin: 0, 
    // enable table grouping and set field to group by
    groupBy: false, 
    // starting state of group
    groupStartOpen: true, 
    groupValues: false,
    // header generation function
    groupHeader: false, 
    groupHeaderPrint: null,
    groupHeaderClipboard: null,
    groupHeaderHtmlOutput: null,
    groupHeaderDownload: null,
    // html output configs
    htmlOutputConfig: false, 
    // enable movable columns
    movableColumns: false, 
    // enable movable rows
    movableRows: false, 
    // tables for movable rows to be connected to
    movableRowsConnectedTables: false, 
    // other elements for movable rows to be connected to
    movableRowsConnectedElements: false, 
    movableRowsSender: false,
    movableRowsReceiver: "insert",
    movableRowsSendingStart: function movableRowsSendingStart() {},
    movableRowsSent: function movableRowsSent() {},
    movableRowsSentFailed: function movableRowsSentFailed() {},
    movableRowsSendingStop: function movableRowsSendingStop() {},
    movableRowsReceivingStart: function movableRowsReceivingStart() {},
    movableRowsReceived: function movableRowsReceived() {},
    movableRowsReceivedFailed: function movableRowsReceivedFailed() {},
    movableRowsReceivingStop: function movableRowsReceivingStop() {},
    movableRowsElementDrop: function movableRowsElementDrop() {},
    scrollToRowPosition: "top",
    scrollToRowIfVisible: true,
    scrollToColumnPosition: "left",
    scrollToColumnIfVisible: true,
    rowFormatter: false,
    rowFormatterPrint: null,
    rowFormatterClipboard: null,
    rowFormatterHtmlOutput: null,
    placeholder: false,
    // table building callbacks
    tableBuilding: function tableBuilding() {},
    tableBuilt: function tableBuilt() {},
    // render callbacks
    renderStarted: function renderStarted() {},
    renderComplete: function renderComplete() {},
    // row callbacks
    rowClick: false,
    rowDblClick: false,
    rowContext: false,
    rowTap: false,
    rowDblTap: false,
    rowTapHold: false,
    rowMouseEnter: false,
    rowMouseLeave: false,
    rowMouseOver: false,
    rowMouseOut: false,
    rowMouseMove: false,
    rowContext<a href="#!">Menu</a>: false,
    rowAdded: function rowAdded() {},
    rowDeleted: function rowDeleted() {},
    rowMoved: function rowMoved() {},
    rowUpdated: function rowUpdated() {},
    rowSelectionChanged: function rowSelectionChanged() {},
    rowSelected: function rowSelected() {},
    rowDeselected: function rowDeselected() {},
    rowResized: function rowResized() {},
    // cell callbacks
    // row callbacks
    cellClick: false,
    cellDblClick: false,
    cellContext: false,
    cellTap: false,
    cellDblTap: false,
    cellTapHold: false,
    cellMouseEnter: false,
    cellMouseLeave: false,
    cellMouseOver: false,
    cellMouseOut: false,
    cellMouseMove: false,
    cellEditing: function cellEditing() {},
    cellEdited: function cellEdited() {},
    cellEditCancelled: function cellEditCancelled() {},
    // column callbacks
    columnMoved: false,
    columnResized: function columnResized() {},
    columnTitleChanged: function columnTitleChanged() {},
    columnVisibilityChanged: function columnVisibilityChanged() {},
    // HTML import callbacks
    htmlImporting: function htmlImporting() {},
    htmlImported: function htmlImported() {},
    // data callbacks
    dataLoading: function dataLoading() {},
    dataLoaded: function dataLoaded() {},
    dataEdited: function dataEdited() {},
    // ajax callbacks
    ajaxRequesting: function ajaxRequesting() {},
    ajaxResponse: false,
    ajaxError: function ajaxError() {},
    // filtering callbacks
    dataFiltering: false,
    dataFiltered: false,
    // sorting callbacks
    dataSorting: function dataSorting() {},
    dataSorted: function dataSorted() {},
    // grouping callbacks
    groupToggleElement: "arrow",
    groupClosedShowCalcs: false,
    dataGrouping: function dataGrouping() {},
    dataGrouped: false,
    groupVisibilityChanged: function groupVisibilityChanged() {},
    groupClick: false,
    groupDblClick: false,
    groupContext: false,
    groupContextMenu: false,
    groupTap: false,
    groupDblTap: false,
    groupTapHold: false,
    columnCalcs: true,
    // pagination callbacks
    pageLoaded: function pageLoaded() {},
    // localization callbacks
    localized: function localized() {},
    // validation callbacks
    validationMode: "blocking",
    validationFailed: function validationFailed() {},
    // history callbacks
    historyUndo: function historyUndo() {},
    historyRedo: function historyRedo() {},
    // scroll callbacks
    scrollHorizontal: function scrollHorizontal() {},
    scrollVertical: function scrollVertical() {}
});

7. API strategies.

// replace data
table.replaceData([{id:1, name:"bob", gender:"male"}, {id:2, name:"Jenny", gender:"female"}]) 
table.replaceData("data.php") 
table.replaceData() // reload
table.replaceData(tableData)
.then(function(){
    //run code after table has been successfuly updated
})
.catch(function(error){
    //handle error loading data
});
// update data
table.updateData([{id:1, name:"bob", gender:"male"}, {id:2, name:"Jenny", gender:"female"}]);
table.updateData([{id:1, name:"bob"}])
.then(function(){
    //run code after data has been updated
})
.catch(function(error){
    //handle error updating data
});
// add data
table.addData([{id:6, name:"bob", gender:"male"}, {id:7, name:"Jenny", gender:"female"}], true, 3); //add new data above existing row with index of 3
table.addData([{id:1, name:"bob", gender:"male"}, {id:2, name:"Jenny", gender:"female"}], true)
.then(function(rows){
    //rows - array of the row components for the rows updated or added
    //run code after data has been updated
})
.catch(function(error){
    //handle error updating data
});
// update or add data
table.updateOrAddData([{id:1, name:"bob"}, {id:3, name:"steve"}]);
table.updateOrAddData([{id:1, name:"bob"}, {id:3, name:"steve"}])
.then(function(rows){
    //rows - array of the row components for the rows updated or added
    //run code after data has been updated
})
.catch(function(error){
    //handle error updating data
});
// clear data
table.clearData();
// get data
table.getData();
table.getData("active");
table.getDataCount();
table.getDataCount("active");
row.getData();
table.getRows();
able.getRows("active");
// add row
table.addRow({name:"Billy Bob", age:"12", gender:"male", height:1}, true)
.then(function(row){
  // ...
})
.catch(function(error){
  ...
});
// update row
table.updateRow(1, {id:1, name:"bob", gender:"male"});
row.update({"name":"steve"})
.then(function(){
  // ...
})
.catch(function(error){
  // ...
});
// update or add row
table.updateOrAddRow(3, {id:3, name:"steve", gender:"male"});
table.updateOrAddRow(3, {id:3, name:"steve", gender:"male"})
.then(function(){
  // ...
})
.catch(function(error){
  // ...
});
// get row element
table.getRow(1);
row.getElement();
// delete row
table.deleteRow(15);
table.deleteRow([15,7, 9]);
row.delete();
table.deleteRow(15)
.then(function(){
  // ...
})
.catch(function(error){
  // ...
});
row.delete()
.then(function(){
  // ...
})
.catch(function(error){
  // ...
});
// set order
table.setSort("age", "asc");
table.setSort([
    {column:"age", dir:"asc"}, //sort by this first
    {column:"height", dir:"desc"}, //then sort by this second
]);
// get sorters
table.getSorters();
// clear all sorters
table.clearSort();
// table validation
table.validate();
row.validate();
column.validate();
cell.validate();
// get invalid cells
table.getInvalidCells();
// check if is valid
cell.isValid();
// clear cell validation
cell.clear<a href="#!">Validation</a>();
table.clearCellValidation();
table.clearCellValidation([cell1, cell2]);
// set filter
table.setFilter("age", ">", 10);
table.setFilter("name", "like", "teve");
table.setFilter("age", "in", ["steve", "bob", "jim"]);
table.setFilter("age", "regex", /[a-z]/);
table.setFilter(customFilter, {height:3});
table.setFilter([
    {field:"age", type:">", value:52}, //filter by age greater than 52
    [
        {field:"height", type:"<", value:142}, //with a height of less than 142
        {field:"name", type:"=", value:"steve"}, //or a name of steve
    ]
]);
// add filter
table.addFilter("age", ">", 22);
// remove filter
table.removeFilter("age", ">", 22);
// get filters
table.getFilters();
// get header filters
table.getHeaderFilters();
// clear all filters
table.clearFilter();
table.clearFilter(true);
table.clearHeaderFilter();
// set header filter value
table.setHeaderFilterValue("name", "Steve");
// get header filter value
table.getHeaderFilterValue("name");
table.getHeaderFilterValue();
// focus On Header Filter
table.setHeaderFilterFocus("name");
// search data
table.searchRows("age", ">", 12);
table.searchData("age", ">", 12);
// get row position
table.getRowPosition(row, true);
table.getRowFromPosition(5, true)
// retrieve data as HTML Table
table.getHtml();
table.getHtml("visible", true, {columnGroups:false});
// recalculate all column calculations
table.recalc(); 
// get calculation results
table.getCalcResults();

Easy Data Table Generator, Make Dynamic Tables in Seconds from Any JSON Data, tabulator Plugin/Github

See Demo And Download