Easy Data Table Generator with jQuery and JSON - Tabulator

Easy Data Table Generator with jQuery and JSON - Tabulator
File Size: 854 KB
Views Total: 31938
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

The tabulator currently is a PURE JavaScript plugin since 4.0.

Tabulator is a feature-rich jQuery/JavaScript plugin used for generating simple or complex data tables from any JSON data, with the following additional features:

  • JSON, array or AJAX data loading
  • High performant large table based on virtual DOM
  • Column sorting
  • Custom data formatting
  • Resizable columns
  • Auto scaling to fit data/element
  • Many theming options
  • Custom click and context Events
  • Callbacks at every stage of data processing and rendering
  • Data filtering.

How to use it (4.0+):

1. Install it with NPM.

$ npm install tabulator --save

2. Load the necessary JavaScript and CSS files in the html page.

<link href="dist/css/tabulator.min.css" rel="stylesheet">
<script src="dist/js/tabulator.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,
    // configuration options here

6. All possible configuration options.

var table = new Tabulator("#myTable", {    

    height: false, //height of tabulator

    minHeight: false, //minimum height of tabulator

    maxHeight: false, //maximum height of tabulator

    layout: "fitData", ///layout type "fitColumns" | "fitData"

    layoutColumnsOnNewData: false, //update column widths on setData

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

    columnHeaderVertAlign: "top", //vertical alignment of column headers

    columnVertAlign: false, // DEPRECATED - Left to allow warning

    resizableColumns: true, //resizable columns

    resizableRows: false, //resizable rows

    autoResize: true, //auto resize table

    columns: [], //store for colum header info

    cellHozAlign: "", //horizontal align columns

    cellVertAlign: "", //certical align columns

    data: [], //default starting data

    autoColumns: false, //build columns from data row structure

    reactiveData: false, //enable data reactivity

    nestedFieldSeparator: ".", //seperatpr for nested data

    tooltips: false, //Tool tip value

    tooltipsHeader: false, //Tool tip for headers

    tooltipGenerationMode: "load", //when to generate tooltips

    initialSort: false, //initial sorting criteria

    initialFilter: false, //initial filtering criteria

    initialHeaderFilter: false, //initial header filtering criteria

    columnHeaderSortMulti: true, //multiple or single column sorting

    sortOrderReverse: false, //reverse internal sort ordering

    headerSort: true, //set default global header sort

    headerSortTristate: false, //set default tristate header sorting

    footerElement: false, //hold footer element

    index: "id", //filed for row index

    keybindings: [], //array for keybindings

    tabEndNewRow: false, //create new row when tab to end of table

    invalidOptionWarnings: true, //allow toggling of invalid option warnings

    clipboard: false, //enable clipboard

    clipboardCopyStyled: true, //formatted table data

    clipboardCopyConfig: false, //clipboard config

    clipboardCopyFormatter: false, //DEPRICATED - REMOVE in 5.0

    clipboardCopyRowRange: "active", //restrict clipboard to visible rows only

    clipboardPasteParser: "table", //convert pasted clipboard data to rows

    clipboardPasteAction: "insert", //how to insert pasted data into the table

    clipboardCopied: function clipboardCopied() {}, //data has been copied to the clipboard

    clipboardPasted: function clipboardPasted() {}, //data has been pasted into the table

    clipboardPasteError: function clipboardPasteError() {}, //data has not successfully been pasted into the table

    downloadDataFormatter: false, //function to manipulate table data before it is downloaded

    downloadReady: function downloadReady(data, blob) {
      return blob;
    }, //function to manipulate download data

    downloadComplete: false, //function to manipulate download data

    downloadConfig: false, //download config

    dataTree: false, //enable data tree

    dataTreeElementColumn: false,

    dataTreeBranchElement: true, //show data tree branch element

    dataTreeChildIndent: 9, //data tree child indent in px

    dataTreeChildField: "_children", //data tre column field to look for child rows

    dataTreeCollapseElement: false, //data tree row collapse element

    dataTreeExpandElement: false, //data tree row expand element

    dataTreeStartExpanded: false,

    dataTreeRowExpanded: function dataTreeRowExpanded() {}, //row has been expanded

    dataTreeRowCollapsed: function dataTreeRowCollapsed() {}, //row has been collapsed

    dataTreeChildColumnCalcs: false, //include visible data tree rows in column calculations

    dataTreeSelectPropagate: false, //seleccting a parent row selects its children

    printAsHtml: false, //enable print as html

    printFormatter: false, //printing page formatter

    printHeader: false, //page header contents

    printFooter: false, //page footer contents

    printCopyStyle: true, //DEPRICATED - REMOVE in 5.0

    printStyled: true, //enable print as html styling

    printVisibleRows: true, //DEPRICATED - REMOVE in 5.0

    printRowRange: "visible", //restrict print to visible rows only

    printConfig: {}, //print config options

    addRowPos: "bottom", //position to insert blank rows, top|bottom

    selectable: "highlight", //highlight rows on hover

    selectableRangeMode: "drag", //highlight rows on hover

    selectableRollingSelection: true, //roll selection once maximum number of selectable rows is reached

    selectablePersistence: true, // maintain selection when table view is updated

    selectableCheck: function selectableCheck(data, row) {
      return true;
    }, //check wheather row is selectable

    headerFilterLiveFilterDelay: 300, //delay before updating column after user types in header filter

    headerFilterPlaceholder: false, //placeholder text to display in header filters

    headerVisible: true, //hide header

    history: false, //enable edit history

    locale: false, //current system language

    langs: {},

    virtualDom: true, //enable DOM virtualization

    virtualDomBuffer: 0, // set virtual DOM buffer size

    persistentLayout: false, //DEPRICATED - REMOVE in 5.0

    persistentSort: false, //DEPRICATED - REMOVE in 5.0

    persistentFilter: false, //DEPRICATED - REMOVE in 5.0

    persistenceID: "", //key for persistent storage

    persistenceMode: true, //mode for storing persistence information

    persistenceReaderFunc: false, //function for handling persistence data reading

    persistenceWriterFunc: false, //function for handling persistence data writing

    persistence: false,

    responsiveLayout: false, //responsive layout flags

    responsiveLayoutCollapseStartOpen: true, //start showing collapsed data

    responsiveLayoutCollapseUseFormatters: true, //responsive layout collapse formatter

    responsiveLayoutCollapseFormatter: false, //responsive layout collapse formatter

    pagination: false, //set pagination type

    paginationSize: false, //set number of rows to a page

    paginationInitialPage: 1, //initail page to show on load

    paginationButtonCount: 5, // set count of page button

    paginationSizeSelector: false, //add pagination size selector element

    paginationElement: false, //element to hold pagination numbers

    paginationDataSent: {}, //pagination data sent to the server

    paginationDataReceived: {}, //pagination data received from the server

    paginationAddRow: "page", //add rows on table or page

    ajaxURL: false, //url for ajax loading

    ajaxURLGenerator: false,

    ajaxParams: {}, //params for ajax loading

    ajaxConfig: "get", //ajax request type

    ajaxContentType: "form", //ajax request type

    ajaxRequestFunc: false, //promise function

    ajaxLoader: true, //show loader

    ajaxLoaderLoading: false, //loader element

    ajaxLoaderError: false, //loader element

    ajaxFiltering: false,

    ajaxSorting: false,

    ajaxProgressiveLoad: false, //progressive loading

    ajaxProgressiveLoadDelay: 0, //delay between requests

    ajaxProgressiveLoadScrollMargin: 0, //margin before scroll begins

    groupBy: false, //enable table grouping and set field to group by

    groupStartOpen: true, //starting state of group

    groupValues: false,

    groupHeader: false, //header generation function

    htmlOutputConfig: false, //html outypu config

    movableColumns: false, //enable movable columns

    movableRows: false, //enable movable rows

    movableRowsConnectedTables: false, //tables for movable rows to be connected to

    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() {},

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

    groupTap: false,

    groupDblTap: false,

    groupTapHold: false,

    columnCalcs: true,

    //pagination callbacks

    pageLoaded: function pageLoaded() {},

    //localization callbacks

    localized: function localized() {},

    //validation has failed

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

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

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

// recalculate all column calculations

// get calculation results

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.

  {title:"Name", field:"name", width:200},
  {title:"Age", field:"age"},
  {title:"Gender", field:"gender"},
  {title:"Height", field:"height", width:80},
  {title:"Favourite Color", field:"col"},
  {title:"Date Of Birth", field:"dob"},
  {title:"Likes Cheese", field:"cheese"},


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 "&nbsp;"
  • 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


  • v3.1: fix setvalue behaviour


  • added precision to money formatter


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


  • New text formatter to prevent HTML injections


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


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


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


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


  • only override ajaxParams if they are passed to the setData function


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


  • fixed braket styling issue


  • escape column title when generating CSV's


  • fixed issue with row selection function


  • added rownum formatter


  • fixed typo in persistence config option name


  • allow string or number values for index on updateRow and deleteRow


  • fix issue with column resizing referenceing incorrect data attribute


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


  • added groupStartOpen option to change open states of row groups


  • fix regression in row selection function


  • added onDblClick event binding to column definitions


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


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


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


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


  • added tableBuilding and tableBuild callbacks


  • fixed issue with function declaration breaking on ie


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


  • added ajaxType setup option


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


  • fixed wrapping issue in column headers on resize
  • download function added


  • fixed rendering glitch in updateLocaleText function


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


  • changed default column header vertical alignment to "top"


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


  • mutate data in updateRow function


  • added accessor exentsion options


  • refactored cell edit mutators and get data argument calls


  • time formatter added


  • Update tabulator.js


  • improved money formatter to handle non numeric values


  • fix bug with case sensitive header filters


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


  • js update


  • editable column headers added


  •   fixed invertion of array push in addRow function


  • polyfill added for Array.find method on IE


  • fixed rendering bug on moved columns


  • object scope now passed to sorters, formatters and editors


  • Version updated to 2.3.0


  • 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


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


  • trigger appropriate UI response when setOption is called


  • fixed dialog loading popup


  • Updated Version to 2.1


  • Updated Version to 2.0.1


  • fixed missing function definition for _generateTooltip


  • setData can now take optional parameter object


  • deleteRow now updates groups on row deletion


  • v1.9.0:allow column tooltips to override global tooltips


  • dataEdited Event Added


  • allow rowFormatter callback to replace row contents


  • Custom filter functions added


  • css fix in row render


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


  • bugfix for colMove


  • Fixed fitColumns width bug


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


  • Added cssClass option for columns
  • Fixed group header rendering issue


  • v1.7.0: Column Visibility Toggle Functions


  • Bug fix - custom index with empty data


  • Column Visibility Option Added


  • Fixed double rowEdit Trigger


  • multisort array handling added


  • keyboard navigation of editors
  • tick editor added


  • Formatter Parameters Added


  • filter trigger events added


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


  • 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.