jQuery Plugins › jQuery Table Plugins › jQuery Tabulator

Easy Data Table Generator with jQuery and JSON - Tabulator

File Size:	1.06 MB
Views Total:	37271
Last Update:	12/23/2020 00:05:00 UTC
Publish Date:	12/20/2015 01:48:31 UTC
Official Website:	Go to website
License:	MIT

Demo Download

How to start using jQuery?

How to use it (4.0+):

1. Install it with NPM.

# NPM
$ npm install tabulator --save

2. Load the necessary JavaScript and CSS files in the html 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 data 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 basic data table from the data you provide.

var table = new Tabulator("#myTable", {
    data: myData,
    columns:[
      {title:"Name", field:"name", maxWidth:200},
      {title:"Age", field:"age"},
      {title:"Gender", field:"gender"},
      {title:"Height", field:"height", maxWidth:80},
      {title:"Favourite Color", field:"col"},
      {title:"Date Of Birth", field:"dob"},
      {title:"Likes Cheese", field:"cheese"},
      {title:"Example", field:"example", formatter:"image", formatterParams:{urlPrefix:"http://website.com/images/"}}
    ]
    // configuration options here
});

6. Append multi-level context menus to the table.

var table = new Tabulator("#myTable", {
    rowContextMenu: [{
        label: "Hide Column",
        action: function (e, column) {
          column.hide();
        }
      },
      {
        label: "Sub Menu" //sub menu
        menu: [{
            label: "Do Something"
            action: function (e, column) {
              //do something
            }
          },
          {
            label: "Do Something Else"
            action: function (e, column) {
              //do something else
            }
          },
          {
            label: "Deeper Sub Menu" //sub menu nested in sub menu
            menu: [{
              label: "Do Another Thing"
              action: function (e, column) {
                //do another thing
              }
            }, ]
          }
        ]
      }
    ]
});

7. All possible 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", 

    // update column widths on setData
    layoutColumnsOnNewData: false, 

    // minimum global width for a column
    columnMinWidth: 40, 

    // minimum global width for a column
    columnMaxWidth: false, 

    // 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, 

    // called with the scope of the table so you can now access the parent table on the this variable
    ajaxURLGenerator: function(url, config, params){},

    // 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
    ajaxProgressiveLoadScrollMargin: 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,

    rowContextMenu: 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 methods.

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

// refresh current filter
table.refreshFilters();

// clear history
table.clearHistory();

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

How to use it (jQuery):

1. Load the necessary jQuery and Tabulator libraries in the html page.

<link href="dist/css/tabulator.min.css" rel="stylesheet">
<script src="dist/js/tabulator.min.js"></script>

2. Just load the jQuery Tabulator wrapper after jQuery library and we're ready to go.

<script src="jquery_wrapper.min.js"></script>

3. Generate a simple data table inside the container 'demo' from the JSON data you specify during initialization.

$("#demo").tabulator({
  data:[
    {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"},
  ],
  columns:[
    {title:"Name", field:"name", maxWidth:200},
    {title:"Age", field:"age"},
    {title:"Gender", field:"gender"},
    {title:"Height", field:"height", maxWidth:80},
    {title:"Favourite Color", field:"col"},
    {title:"Date Of Birth", field:"dob"},
    {title:"Likes Cheese", field:"cheese"},
    {title:"Example", field:"example", formatter:"image", formatterParams:{urlPrefix:"http://website.com/images/"}}
  ]
});

Changelog:

v4.9.3 (2020-12-23)

Fixed regression in the setColumnLayout function

v4.9.2 (2020-12-22)

Missing dependency for gulp-uglify-es has been added to the package.json
Fixed regression with excptuion being thrown when rendering table in IE
Fixed issue with row components not being passed into custom sorter functions
Fixed regression in persitance system that was preventing column order from being persisted
Using the paginationInitialPage option with remote pagination no longer results in a console warning if the page is not set to 1
Removed debug trace command from movable rows module
The select editor now correctly handles false values when used as a header filter with multiselect mode enabled
The autocomplete editor is now correctly reset when clearFilter is called, so the showListOnEmpty option now functions as expected
The built in header filter empty check function now considers headers with a numeric value of 0 to not be empty
The dataTreeSelectPropagate option now correctly includes all child rows in the slection, including ones in a currently collapsed parent
The setColumnLayout now works when the horizontal DOM is enabled
When focusing on an editable cell with the horizontal virtual DOM enabled, the table now correctly scrolls the cell to be visible
Fixed regression preventing UI update of selected rows that had yet to be rendered

v4.9.1 (2020-12-14)

Fixed regression in select editor when values param property is set to true
Fix regression with row components not being passed to sorter functions

v4.9.0 (2020-11-23)

Performance Improvements
Supports nested menus
Tweaks and Fixes

v4.8.4 (2020-10-30)

Fixed an issue where Toggling visibility of a column with the horizontal virtual DOM enabled caused a graphical glitch
The table is now correctly redrawn when the addColumn function is used to add a column that contains child columns
When a child column is deleted it is now correctly removed from its parent and the parent will remove itself if it now has no children

v4.8.3 (2020-10-26)

Avg column calculation function casts values to numbers to better handle string values
Overriding default options on the tabulator prototype now works correctly for array and object values
autocomplete and select editor lists now scroll when navigated using arrow keys
Fixed render issue with column headers that have both header menus and editible header titles
Calling the update function on a row while it is visible no longer atempts to layout the rows dataTree
The clipboardCopyConfig option is now correctly parsed when triggreing a copy action
The clipboard module now corretly blocks external cliboard triggers after the first call of the copy function
The clearEdited function now works reguardless of whether validation is enabled or disabled on the table
Fixed a regression in vertical header layout mode, sort arrows are now correctly positioned at the top of the column header

v4.8.2 (2020-09-27)

The scrollToColumn function now works correctly when scrolling to the left of the table
Vertically aligned cells are now correctly displayed when made visible after being hidden
Export functions now correctly return row data in row formatters
Fixed regression where calculation row cells were accidentally calling column formatters instead of their specific calc formatters
Fixed regression preventing pasting into empty tables

v4.8.1 (2020-09-14)

Function based column defintion properties are no longer eroniously stored by the persistence module
The getTable function now works correctly on CalcComponents
The rowSelection formatter now correctly renders an empty cell on calculation rows
All row management arrays are now cleared down correctly when the table is wiped before new data is loaded
Child rows are now correctly reinitialized when columns are moved programatically
The getRow function on the CellComponent wrpper object passed into formatters when exported, now works correctly
Sub pixel rounding errors in the non-fixed height layout mode when using a zoomed browser have been fixed.

v4.8.0 (2020-09-06)

Horizontal vDOM, RTL Test Direction, ESM Module, Auto Column Improvements

v4.7.2 (2020-07-13)

The dataLoaded callback is now triggered after the table has been rendered when new data is loaded into the table
The table is now horizontally shifted into focus when a cell is being edited
A regression with the setDataFromLocalFile function has been fixed
Row components are now correctly detached from table modules before being wiped on new table data
The autocomplete editor now correctly loads its initial value when used as a header filter

v4.7.1 (2020-06-28)

The validationFailed callback is now triggered when validation fails in highlight validation mode.
Lots of bugs fixed.

v4.7.0 (2020-06-22)

Enhanced Validation, Overhauled Downloading, Improved Tree Manipulation

v4.6.3 (2020-05-11)

Fixed regression in data trees, where editing the cell containing the controls resulted in them being removed
Unused legacy CSS from v3.5 has been removed from stylesheets
Fixed variable scoping issue in the _buildColumnHeaderContent function
Column Components are now correctly passed to menu generator functions
The getHeaderFilterValue now correctly returns the filter value
Child rows in data trees are now correctly indented when lazy loaded after render
Using the selected option in any export function now works correctly
If a row is deleted when a cell it contains is being edited, that edit is now cancelled before the row is deleted
If a column is deleted when a cell it contains is being edited, that edit is now cancelled before the column is deleted
Cells with a value of an empty sting now render the correct height
Fix styling regression in bootstrap 4 theme with dark mode classes
Row height is now correctly recalculated on row data update
Prevent text selection issues on chrome when double clicking on non editable data
Fixed typo in deprecation warning
Movable rows dragged directly above group headers now have their group key changed to the correct value

v4.6.2 (2020-04-13)

Improved sorter performance with multi-column sorts
Fixed issue with object pointer isolation when either paginationDataSent or paginationDataReceived options are used in multiple tables on the same page
Context menu will now load in correct position when page contents does not take up the full viewport height
Fixed styling issue with modern theme when frozen columns were in use
The scroll bar on the options lists for the select and autocomplete editors now works correctly on Internet Explorer
When paginating data without the paginationSize option set on a fixed height table, the styling of the rows is taken into consideration when calculating the correct page size.
Navigating the table up and down through editable cells no longer causes editable rows out of view to jump to the center of the table when they gain focus
Virtual DOM buffer is now correctly maintained when scrolling from the top and bottom edges of the table. This will prevent visual glitches and navigation issues when vertically scrolling with arrow keys from either end of the table
The onRendered callback in formatters is now correctly called after an edit has been successfull or been cancelled
The progress editor has been improved to allow easier editing with arrow and tab keys

v4.6.1 (2020-04-05)

Removing row grouping during table use, now correctly propagates to download module
The table no longer causes a console error if it is created on an element that is not attached to the DOM
Fixed regression in autocomplete editor, it now correctly retains old value when blurring with invalid value
The deleteRow function will now delete rows in the order they appear in the table to allow for smoother more predictable undo functionality

v4.6.0 (2020-03-30)

Context and Header Menus
Virtual DOM for Variable Height Tables
Improved Data Trees
Bugfixed
And Much More...

v4.5.3 (2020-01-01)

allow getColumnLayout function to work when persistence is not enabled on the table
fix regression in 4.5.0 that prevented multi-sheet xlsx downloads
fix regression in 4.5.0 that prevented data mutation on undefined column data

v4.5.2 (2019-12-09)

fix scoping issue of browserMobile variable in table resize module (fixes console error on mobile browsers)
fix issue in fitDataStretch layout that caused an error when total column width exceeded table width
fix scope issue in select row module

v4.5.1 (2019-11-26)

Fixed issue with persistence option set to true resulting in an error
Fixed regression in mutator module causing error

v4.5.0 (2019-11-25)

New fitDataStretch layout
Update persistence options
More API methods
Add Materialize Theme
The titleFormatter functions now accept the onRendered callback function as thier fourth argument
Tabulator can now detect when it is being run on a mobile device
The groupClick, groupDblClick and groupContext callbacks now have a this scope of the table
A new visible cope selector has been added to allow clipboard copying of only the rows currently visisible in the table viewport
You can now use the paginationInitialPage option to specify that a specific page should be loaded when the table first loads.
The addColumn and deleteColumn table functions now return a promise. As does the delete function on the column component
The ajaxURL option can now handle urls that contain existing paramters
The HTML Table Export module has been updated, now css classes applied with the cssClass column definition property will be duplicated through to the module output.
Add 4 options into the selectRow function
An optional fourth argument to the download function now allows you to specify the data set you wish to download
The scrollVertical callback is triggered when the table is vertically scrolled
Horizontal Scroll
Bug Fixes

v4.4.3 (2019-09-30)

the row.update function now correctly updates cells with fields bound to nested data
the setHeight function now warns users when used in classic render mode
the success function passed into editors now returns a boolean to indicate if validation has been successful
editor initial values are now updated on success when used as headerFilters to ensure emptying of inputs is registered
the scrollToRow function now correctly scrolls to rows at the bottom of the table when the "bottom" or "middle" modes are used
validators now correctly handle properties containing ":" characters
the tabEndNewRow function now correctly selects the first cell in the new row in classic render mode

v4.4.2 (2019-09-29)

fixed console error when double clicking on tree toggle elements
fixed regression breaking columnHeaders:false option on clipboard output
resposiveLayout:true and headerVisible:false now work correctly when used togeather
the star formatter now handles non numeric values with a value of 0 stars instead of 5 stars
the link formatter now correctly handles falsey label values by showing an empty cell instead of " "
large numbers of columns are now displayed correctly
columns defined without fields are now included in print and getHtml output
tree toggle elements are now correctly preserved when row data is updated
clicking on the tree toggle element will no longer trigger a cell edit if the column the toggle is in is editable
using row selection and editable cells on the same table no longer results in focus being lost as soon as the editor is opened
redo and undo actions on row addition and deletion are now handled correctly with row grouping enabled
rows are now inserted into the correct position on the table when they are added with row grouping enabled

v4.4.1 (2019-08-14)

Fix issue in persistence local storage check function
fix typo in nbsp insertion

v4.4.0 (2019-08-12)

Tickbox Row Selection, Programatic Column Moving, Clipboard Column Visibility and Much More

v4.3.0 (2019-07-22)

Print Styling and Table Printing, Scroll, Headerless Table Mode, Performance Improvments and Much More

v4.2.7 (2019-04-30)

Fix issue introduced in 4.2.6 that throws an exception when frozen columns and grouped rows are used in the same table
Fix issue where titleFormatters were adding their contents to the wrong header element

v4.2.6 (2019-04-29)

change tracking of header filter focus events to improve horizontal scroll render speed
refactored frozen column rendering to improve render efficiency
restore render efficiency of horizontal scroll to the level it was at pre 4.2 release
allow row collapse column formatter to handle returned DOM Nodes as well as HTML strings to allow more formatters to display in collapsed column list
fix logic issue on tickcross header filter key event trigger
fixed the blur event on the number editor that regressed in the 4.2.4 release, the editor should now work on Firefox again
fixed issue with double click on column group resize handle breaking the header layout and causing abnormal resize behaviour
the autocomplete editor now correctly handles undefined initial values
the bootstrap 4 theme now correctly displays frozen columns without transparency to the row below

v4.2.5 (2019-04-08)

Fix Detached DOM Node Memory Leak
Updates the ajaxLoaderError option now parses in HTML to match the functionality of the ajaxLoaderLoading option
Updates clicking up/down arrow keys no longer triggers scroll of the table when using editors
Updates the autocomp editor now passes an array of value objects to the searchFunc callback and expects a return value of a filtered array of those objects
Updates the responsiveLayoutCollapseFormatter callback now receives an array of value objects rather than an object
Lots of bugs fixed

v4.2.3 (2019-03-10)

Fixed error on XSLX download if cell contains date object
prevent tickCross header filter from triggering on a live change to prevent issues with false triggering of undefined state
prevent error when calling delete function on grouped row when using reactiveData mode

v4.2.2 (2019-03-04)

In data tree mode do not show expand element on row when _children property set to null
In data tree mode allow a single row object to be passed directly to the _children property instead of being passed in an array
Manual row height adjustments now persist after row re-initialization
By default data tree elements are now inserted in the first visible column rather than the first defined column
Data objects are now passed directly into the xlsx downloader rather than being formatted to allow column to be correctly defined as a date in the output file
Bug fixed

v4.2.1 (2019-02-18)

reactive data module now correctly unwatches arrays and objects
reactive data module now better at determining whether a watch binding is current
fixed context issue in table destroy function
fixed issue with programmatic selection of rows when row selection is disabled on the table
initial sorters are now correctly applied to tables with autocolumns enable on initial data set

v4.2.0 (2019-02-11)

fixed readOnly bug in select editor
fixed bug so that numbers with more than one comma in them will be parsed correctly.

v4.1.5 (2019-01-07)

improve null handling in textarea editor

v4.1.4 (2018-12-19)

if no ajaxURL is set when pagination it set to "remote" load blank array until setData is called

v4.1.3 (2018-11-26)

prevent render glitch where table vertical scroll position was adjusted by the height of the horizontal scrollbar if present
fix child node itteration issue on row grouping in IE

v4.1.2 (2018-11-13)

prevent mutation of data entered into calculation rows

v4.1.1 (2018-11-07)

handle promise rejection of final page of scroll progressive loading
fix uncaught rejection handling on page module nextPage function

v4.1.0 (2018-11-05)

rename selectableRangeType to selectableRangeMode
add getColumn function to header filters sudo cell component
fixed issue with formatter deprication map not updating correct param

v4.0.5 (2018-10-18)

fix missing prentesis on getElement function call in movable rows module
remove sanitatization of image formatter URL

v4.0.4 (2018-10-14)

Removal of jQuery Dependancy
Core Files Package
Promises
Ajax: Fetch, URL Generator, Request Function
Extensions Renamed to Modules
Callback Context
Param Object Lookup Functions
Clipboard Styling
Formatters
Filtering
History Availability
Pagination URL
PDF Downloads
Column Headers
Row Component
Column Component
Cell Component
Group Component
Bug Fixes
Removal of Depricated Functionlaity
use ajax post form data instad of JSON to be consistent with get request
ensure that header filters are only triggered on correct value change
handle creating Tabulator on empy table element without erroring
fix typo in scrollTo function of column component
ensure tickCross formatter allows empty value on empty string

v3.5.3 (2018-06-25)

fix nested row group collapse in classic render mode
remove unneeded console.log

v3.5.2 (2018-05-20)

match pagination element style to bootstrap element style for bootstrap

v3.5.1 (2018-05-19)

fix scope issue on navigation functions
remove header filter input type to search conversion on microsoft browsers as they do not corretly implement the clear X button

v3.5.0 (2018-04-22)

prevent selection of the same row more than once
Fixed missing index scope issue on row deletion with history mode enabled
Fix issues with bootstrap 4 row styling not working correctly with row selection enabled
Unrestrict which attribulat values can be set on html table headers and parsed into Tabulator
Prevent cell height being shorter than row height

v3.4.6 (2018-03-28)

set correct max and min attributes on progress formatter to allow editor to correctly set boundries
prevent infinite loop in cell focus when programatically triggering cell edit
resolve merge conflicts

v3.4.5 (2018-03-23)

prevent issues in using a single column definition object between multiple tables

v3.4.4 (2018-03-14)

fix regresion in localized text loading
ensure frozen rows are correclt initialize if they have not been rendered yet

v3.4.3 (2018-02-24)

Rendering Performance
Column Layout and Resizing
Grouped Row Updates
Persistent Configuration
Resizable Rows
Validator Updates
Column Calculation Improvements
Editing Updates
Sorter Updates
Filter Updates
Formatting Updates
History Extension Updates
Row Position Informaton
HTML Output
General System Tweaks
Ensure that componets are correctly generated for updateOrAddRow function
Fix issues with progress bar formatter, it row respects the column "align" property, and the percentage scalling is now accurate
Fix scrollTo bug when scrolling to end of table when rows available are less that the virtual dom buffer size

v3.4.2 (2018-02-19)

Trigger header tooltip update on mouse enter
Fix issue with unreachable return statments in null handling in number and array sorters
Set tanle height before choosing render mode

v3.4.1 (2018-02-16)

Fix regression with scrollTo Row functionality
Allow local pagination with remote data
Add tabulator-field attribute to the column header elements

v3.4.0 (2018-02-12)

Fix default styling on select editor

v3.3.3 (2018-01-17)

remove erronious initialization of keybindings array
fix order of magnitude error in left margin of 5th level group element

v3.3.2 (2017-12-26)

prevent "undefined" in blank table headers for getHTML function
fixed scoping issue on variable in html import extension

v3.3.1 (2017-10-13)

fix column header sort order in ajaxSorting mode
keep horizontal scroll in same position after header filter

v3.3.0 (2017-10-08)

New Column Layout System
Input Validation
Updated Group Functionality
Multi Column Header Sort
Column Calculations Updates
Ajax Updates
Ajax Sorting and Filtering
Filter Function Updates
Select All Filtered Rows
Insert New Data Anywhere In Table
Component Obeject Updates
Pagination Updates
Format Column Header Titles
Custom Download Column Titles
Export table data to HTML table
General System Tweaks
make row handles unselectable
Correctly add group header visibility classes to header when virtual DOM is disabled
prevent divide by zero error in fitColumns layout function

v3.2.2 (2017-09-18)

prevent memory leak on row reinitialization
fix self scope issue in column hide and show function
fix missing return in getPAge and getPageMax functions
fix issue with column header tooltip generation from function
added getField function to header editor cell wrapper object

v3.2.1 (2017-08-06)

ensure that sum calc only deals with numbers, added concat calc to join strings
prevent memory leak on row reinitialization

v3.2 (2017-07-28)

ensure zeros are trimmed from precision
ensure zeros ave trimed from avg calc result
ensure movable rows and groupd rows work correctly togeather
fix typo in filter_type

v3.1.5 (2017-07-16)

replace page up/down and home and end keybindings to allow for better table control accross browsers
Revert "added touch events to cells and rows"

v3.1.4 (2017-07-09)

removed timeout from initial dataload

v3.1.2 (2017-07-02)

remove unessisary console.log

v3.1.1 (2017-06-28)

prevent hidden tables from breaking the virtual render and force the redar function to redraw all elements when the second parameter is true
fix issue in row sort refresh function
return cell component instead of cell from row.getCell() function
fix issue in mutator binding on cell change
fix custom header filter element binding

2017-06-19

v3.1: fix setvalue behaviour

2017-06-10

added precision to money formatter

2017-06-05

changeheader filter text type inputs to search type inputs to allow for clearing of search data

2017-05-23

New text formatter to prevent HTML injections

2017-04-16

fix remote progressive rendering scrolling issue and async load problems
prevent clicks on header filters propagating to table headers

2017-04-13

added tabulator-row-editing class to rows currently being edited

2017-04-10

optimised header click event bindings
handle column group visibility on column deletion
adjust for vertical scrollbar when using fitColumns mode

2017-04-08

fix row indexing change on row redraw
fix issue parsing in attribute names on IE

2017-03-15

only override ajaxParams if they are passed to the setData function

2017-03-14

addColumn, handle field and index lookups
prevent minWith from causing render issues in responsive mode

2017-02-28

fixed braket styling issue

2017-02-25

escape column title when generating CSV's

2017-02-20

fixed issue with row selection function

2017-02-13

added rownum formatter

2017-02-12

fixed typo in persistence config option name

2017-01-31

allow string or number values for index on updateRow and deleteRow

2017-01-29

fix issue with column resizing referenceing incorrect data attribute

2017-01-22

frozen column functionality added
convert arrays and objects to csv safe string when downloading

2017-01-21

added groupStartOpen option to change open states of row groups

2017-01-17

fix regression in row selection function

2017-01-15

added onDblClick event binding to column definitions

2016-12-26

added getSelectedData function
initialize all arrays on table construction to prevent inter-table data transfer

2016-12-25

changed tolerance mode on column sorter to allow for smoother column reordering

2016-12-20

added momentum scrolling on tableHolder element
set correct aria-sort value when sortBy option set

2016-12-19

Fixed issue with checkbox header filter not reading values of false
Stylesheet fix for overflowing column headers on ie

2016-12-18

added tableBuilding and tableBuild callbacks

2016-12-15

fixed issue with function declaration breaking on ie

2016-12-12

fixed issue with arrays passed by reference when not set in object constructor

2016-12-11

added ajaxType setup option

2016-12-03

added update parameter to _getAjaxData, _parseData and _parsePageData to allow addition to existing data set as well as overriting via ajax request;

2016-11-29

fixed wrapping issue in column headers on resize
download function added

2016-11-28

fixed rendering glitch in updateLocaleText function

2016-11-17

mutators now only update a field if it has been defined in the row being mutated

2016-11-13

changed default column header vertical alignment to "top"

2016-11-07

v2.8.0: update html table parser to pull in full cell html not just texxt
fixed text wrapping issues in column header

2016-10-16

mutate data in updateRow function

2016-10-15

added accessor exentsion options

2016-10-10

refactored cell edit mutators and get data argument calls

2016-10-09

time formatter added

2016-10-07

Update tabulator.js

2016-10-04

improved money formatter to handle non numeric values

2016-09-14

fix bug with case sensitive header filters

2016-09-10

styling for moving rows moved to tabulator-row-moving css
standardised callback naming conventions

2016-08-20

js update

2016-08-14

editable column headers added

2016-08-12

fixed invertion of array push in addRow function

2016-08-11

polyfill added for Array.find method on IE

2016-07-27

fixed rendering bug on moved columns

2016-07-26

object scope now passed to sorters, formatters and editors

2016-07-04

Version updated to 2.3.0

2016-06-03

Optimised Column render and cookie save on setColumns
input validation added to setColumns

v2.2.0 (2016-05-17)

added pointer to selectable rows
getPage function and pageLoaded callback added
fixed scrolling issues on non fixed height tables
reordered functions into logical sequence
fixed function scope issue
added tooltipsHeader option

2016-05-12

moved movable row handle styling to CSS and fixed rendering glitch with handle
moved group header span styling to css

2016-05-11

trigger appropriate UI response when setOption is called

2016-05-08

fixed dialog loading popup

2016-05-07

Updated Version to 2.1

2016-05-02

Updated Version to 2.0.1

2016-03-10

fixed missing function definition for _generateTooltip

2016-02-26

setData can now take optional parameter object

2016-02-10

deleteRow now updates groups on row deletion

2016-02-07

v1.9.0:allow column tooltips to override global tooltips

2016-02-04

dataEdited Event Added

2016-02-03

allow rowFormatter callback to replace row contents

2016-01-31

Custom filter functions added

2016-01-30

css fix in row render

2016-01-27

v1.8.1: rowAltBackgroundColor parameter added to control alternate row background colours

2016-01-25

bugfix for colMove

2016-01-23

Fixed fitColumns width bug

2016-01-22

Removed unnecessary z-index and refactored table element styling
Fixed column width resizing on non integer table widths

2016-01-21

Added cssClass option for columns
Fixed group header rendering issue

2016-01-20

v1.7.0: Column Visibility Toggle Functions

2016-01-16

Bug fix - custom index with empty data

2016-01-15

Column Visibility Option Added

2016-01-13

Fixed double rowEdit Trigger

2016-01-11

multisort array handling added

2016-01-10

keyboard navigation of editors
tick editor added

2016-01-09

Formatter Parameters Added

2015-12-27

filter trigger events added

2015-12-24

Data Filter Functions Added
Cell formatting now re-applied after editing

2015-12-23

alphanumeric sorter added

This awesome jQuery plugin is developed by olifolkerd. For more Advanced Usages, please check the demo page or visit the official website.

Easy Data Table Generator with jQuery and JSON - Tabulator

How to use it (4.0+):

How to use it (jQuery):

Changelog:

Related jQuery Plugins

You Might Also Like

Add Your Review