Press "Enter" to skip to content

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

Tabulator allows you to create interactive tables in seconds from any HTML table, JavaScript array, AJAX data source, or JSON format data.

data table generator free, online data tables, advanced html table generator, random data generator online, online html table generator with rowspan, table generator html

Just include the library in your project and you’re away!

Key Features:

  • Upload JSON, Matrix, or AJAX data
  • High-performance large table based on virtual DOM
  • Column sort, Custom data format, and Columns can be resized
  • Automatic scaling to fit data/item
  • Several theme options
  • Custom click and context events
  • Recalls at every stage of data processing and display
  • Data filtering.

How to make use of it:

1. Install it with 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: {

    // 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() // reload
    //run code after table has been successfuly updated
    //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"}])
    //run code after data has been updated
    //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)
    //rows - array of the row components for the rows updated or added

    //run code after data has been updated
    //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"}])
    //rows - array of the row components for the rows updated or added

    //run code after data has been updated
    //handle error updating data

// clear data

// get data

// add row
table.addRow({name:"Billy Bob", age:"12", gender:"male", height:1}, true)
  // ...

// update row
table.updateRow(1, {id:1, name:"bob", gender:"male"});
  // ...
  // ...

// update or add row
table.updateOrAddRow(3, {id:3, name:"steve", gender:"male"});
table.updateOrAddRow(3, {id:3, name:"steve", gender:"male"})
  // ...
  // ...

// get row element

// delete row
table.deleteRow([15,7, 9]);
  // ...
  // ...
  // ...
  // ...

// set order
table.setSort("age", "asc");
    {column:"age", dir:"asc"}, //sort by this first
    {column:"height", dir:"desc"}, //then sort by this second

// get sorters

// clear all sorters

// table validation

// get invalid cells

// check if is valid

// clear cell validation
cell.clear<a href="#!">Validation</a>();
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});
    {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

// get header filters

// clear all filters

// set header filter value
table.setHeaderFilterValue("name", "Steve");

// get header filter value

// focus On Header Filter

// 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("visible", true, {columnGroups:false});

// recalculate all column calculations

// get calculation results

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

See Demo And Download

Official Website(olifolkerd): Click Here

This superior jQuery/javascript plugin is developed by olifolkerd. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.