Old Documentation

You are browsing documentation for an old release of Tabulator. Consider upgrading your project to Tabulator 6.x (latest 6.5.0)

Upgrade Guide

This page documents the breaking changes introduced in each minor release of the 4.x line. Walk the sections from your current version upward.

v4.9
v4.8
v4.7
v4.6
v4.5
v4.4
v4.3
v4.2
v4.1
v4.0

v4.8 → 4.9 Upgrade

Sorting

Number Sorter

To improve numeric sorting efficiency ,the numeric sorter now assumes that numbers are presented in standard floating point format (eg 1234.56).

In previous versions it used to automatically remove thousand separators to accomodate a wider range of number formats (eg 1,234.56), but this adversly affected sorts on simple numbers (it took 6 times longer to sort simple numbers with string maipulation). For this reason if you are sorting formatted numbers you now need to specifcy the thousandSeparator option in the sorterParams

So where you would have simply set your formatter to number:

{title:"Cost", field:"cost", sorter:"number"}

You will now also have to set the thousandSeparator option in the sorterParams:

{title:"Cost", field:"cost", sorter:"number", sorterParams:{thousandSeparator:","}}

v4.7 → 4.8 Upgrade

Importing

If you use tabulator with ESM compatible frameworks like Vue or React (frameworks that require use of the import statement, you will now have to do this with Tabulator to.

Where you used to import tabulator into a project using the require statement:

var Tabulator = require('tabulator-tables');

You will now need to use the import statement

import Tabulator from 'tabulator-tables';

Callbacks

Data Edited Callback

The dataEdited setup option has now been renamed to dataChanged to better describe its updated functionality

Anywhere you used the dataEdited property

var table = new Tabulator("#example-table", {
    dataEdited:function(data){},
});

You should now use the dataChanged property

var table = new Tabulator("#example-table", {
    dataChanged:function(data){},
});

v4.6 → 4.7 Upgrade

Build

The build tools for Tabulator have been updated in this release, as a result of packaging the build tools with the library the old gulp commands have been migrated to npm commands

Build Source

Where you used to run a one off build with the gulp command

gulp

You should now use the following command:

npm run build

Watch Source

Where you used to run a one off build with the gulp command

gulp watch

You should now use the following command:

npm run watch

Downloads

Column Header Title

The downloadTitle column definition property has now been renamed to titleDownload to bring it inline with other export functionality

Anywhere you used the downloadTitle property

var table = new Tabulator("#example-table", {
    columns:[
        {title:"Age", downloadTitle:"User Age", field:"age"},
    ]
});

You should now use the titleDownload property

var table = new Tabulator("#example-table", {
    columns:[
        {title:"Age", titleDownload:"User Age", field:"age"},
    ]
});

Data Formatter

The downloadDataFormatter option has been depricated and is no longer available.

Where you used to use the downloadDataFormatter option to alter data being downloaded, you should now use the accessorDownload on the columns to be altered.

Custom File Formatters

The Download module has been completely rebuilt in this release, and is now based of the Export module. As a result of this, the way that download formatters work has been changed to base them of an array of ExportRow objects, rather than on the previous appraoch involving the arrays of table data

For details on how to convert your file formatter, have a look at the Download Custom File Formatter Documentation. It outlines the new structure of the formatter function and details how you can now use the ExportRow and ExportColumn objects to structure your output

Columns

Check Visibility

The getVisibility function has now been renamed to isVisible to bring it inline with other funcnctions

Anywhere you used the getVisibility function

var visible = column.isVisible();

You should now use the isVisible function

var visible = column.isVisible();

Group

Check Visibility

The getVisibility function has now been renamed to isVisible to bring it inline with other funcnctions

Anywhere you used the getVisibility function

var visible = group.isVisible();

You should now use the isVisible function

var visible = group.isVisible();

v4.5 → 4.6 Upgrade

Vitrual DOM

Full Height Tables

If your table has no height or maximum height and you want it to show all rows without a scroll bar, then it is advisable to disable the Vitrual DOM as the table will become inefficient if it tries to virtuallymanage a table where all rows are visible. To do this you can set the virtualDom option to false to force classic rendering.

var table = new Tabulator("#example-table", {
    virtualDom:false, //disable virtual DOM rendering
});

Though it should be noted that using a table in this way with a large number of rows will result in poor performance

Clipboard

Copy Selector

The clipboardCopySelector option used to be used to set which rows would be visible in the clipboard output.

var table = new Tabulator("#example-table", {
    clipboardCopySelector:"table", //change default selector to active
});

You should now use the clipboardCopyRowRange option which takes any valid Row Range Lookup value:

var table = new Tabulator("#example-table", {
    clipboardCopyRowRange:"all", //copy all rows to the clipboard even if they are filtered out
});

Copy Formatter

The clipboardCopyFormatter option has changed purpose in this release. It used to be used to take an array of row data and format it for output to the clipboard.

var table = new Tabulator("#example-table", {
    clipboardCopyFormatter:function(rowData){
        return JSON.stringify(rowData);
    }
});

It is now used to tweak the output from the export module before it is inserted into the clipboard. It therefor has a new set of arguments and must return a string for the clipboard.

var table = new Tabulator("#example-table", {
    clipboardCopyFormatter:function(type, output){
        //type - a string representing the type of the content, either "plain" or "html"
        //output - the output string about to be passed to the clipboard

        if(type == "plain"){
            output += "/n Copyright Bob Green 2020";
        }

        return output;
    }
});

Copy Function

The copy function now takes a Row Range Lookup value instead of the previous values of "table", "active" and "selected".

table.copyToClipboard("table")

You should now use a valid Row Range Lookup value in the first argument of this function:

table.copyToClipboard("all")

Printing

Styled Printing Option

The printCopyStyle option has been renamed to printStyled to improve naming consistency accross export options

Where you used to use the printCopyStyle option:

var table = new Tabulator("#example-table", {
    printCopyStyle:true, //copy Tabulator styling to HTML table
});

You should now use the printStyled option:

var table = new Tabulator("#example-table", {
    printStyled:true, //copy Tabulator styling to HTML table
});

Print Visible Rows

The printVisibleRows option has been replaced with the printRowRange which allows for a great range of rows to be shown

Where you used to use the printVisibleRows option:

var table = new Tabulator("#example-table", {
    printVisibleRows:false, //print all rows in the table
});

You should now use the printRowRange option:

var table = new Tabulator("#example-table", {
    printRowRange:"all", //print all rows in the table
});

Programatic Printing

The first argument of the print function has been changed to now be a Row Range Lookup value

Where you used to pass a boolean to the first argument of the print function:

table.print(false);

You should now use a valid a Row Range Lookup value:

table.print("active");

HTML Output

The first argument of the getHtml function now takes a Row Range Lookup value that determines which rows are included in the HTML table.

Where you used to pass a boolean to the first argument of the getHtml function:

table.getHtml(false);

You should now use a valid a Row Range Lookup value:

table.getHtml("visible");

Cell Alignment

Where you used to set the horizontal alignment of a cell by using the align column definition property:

{title:"Name", field:"name", align:"center"} //center align cell

You should now use the paramhozAlign property:

{title:"Name", field:"name", hozAlign:"center"} //center align cell

Autocomplete Editor

Where an array of list objects used to be passed into the searchFunc calback and you used to have to check the value property of each object:

values:["jim", "bob", "steve"],
searchFunc:function(term, values){ //search for exact matches
    var matches = []

    values.forEach(function(item){
        if(item.value === term){
            matches.push(item);
        }
    });

    return matches;
}

Now the contents of the values property are passed directly into the function so how you iterate on them depends on the value of the values propery, in the case of an array:

values:["jim", "bob", "steve"],
searchFunc:function(term, values){ //search for exact matches
    var matches = []

    values.forEach(function(item){
        if(item === term){
            matches.push(item);
        }
    });

    return matches;
}

v4.4 → 4.5 Upgrade

Column Deletion

The deleteColumn function used to return a value of false if it was unable to delete the requested column. This function now returns a promise

Where you used to check if the value returned from the deleteColumn function was false:

if(!table.deleteColumn("name")){
	//handle error
}

You should now handle failure in the catch statement:

table.deleteColumn("name")
.then(function(){
    //success
})
.catch(function(error){
    //handle error
})

Persistent Config

Several updates have been made to the persistance module in this update

Sort Persistence

The persistentSort option has been depricated an has been replaced with a property in the new persistence option.

Where you used to set persistentSort to true:

var table = new Tabulator("#example-table", {
    persistentSort:true, //Enable sort persistence
});

you should now set the sort property to true on the persistence option:

var table = new Tabulator("#example-table", {
    persistence:{
    	sort:true //Enable sort persistence
    }
});

Filter Persistence

The persistentFilter option has been depricated an has been replaced with a property in the new persistence option.

Where you used to set persistentFilter to true:

var table = new Tabulator("#example-table", {
    persistentFilter:true, //Enable filter persistence
});

you should now set the filter property to true on the persistence option:

var table = new Tabulator("#example-table", {
    persistence:{
    	filter:true //Enable filter persistence
    }
});

Column Layout Persistence

The persistentLayout option has been depricated an has been replaced with a property in the new persistence option.

Where you used to set persistentLayout to true:

var table = new Tabulator("#example-table", {
    persistentLayout:true, //Enable column layout persistence
});

you should now set the columns property to true on the persistence option:

var table = new Tabulator("#example-table", {
    persistence:{
    	columns:true //Enable filter persistence
    }
});

Active Row Retrieval

Get Active Rows

Passing a boolean of true to the getRows function to retrieve an array of filtered row componets has been depricated, a string of "active" should be passed in instead.

Where you used to pass a value of true to the getRows function:

var rows = table.getRows(true);

You should now pass a value of "active" to the getRows function:

var rows = table.getRows("active");

Get Active Row Data

Passing a boolean of true to the getData function to retrieve an array of filtered row data objects has been depricated, a string of "active" should be passed in instead.

Where you used to pass a value of true to the getData function:

var rows = table.getData(true);

You should now pass a value of "active" to the getData function:

var rows = table.getData("active");

Get Active Row Data Count

Passing a boolean of true to the getDataCount function to retrieve an count of the filtered rows in the table has been depricated, a string of "active" should be passed in instead.

Where you used to pass a value of true to the getDataCount function:

var rows = table.getDataCount(true);

You should now pass a value of "active" to the getDataCount function:

var rows = table.getDataCount("active");

Column Headers

Vertical Alignment

The columnVertAlign option has been renamed to columnHeaderVertAlign to make it clearer that it only affects the column headers

Where you used to set alignment with the columnVertAlign option:

var table = new Tabulator("#example-table", {
    columnVertAlign:"bottom", //align header contents to bottom of cell
});

You should now use the columnHeaderVertAlign option:

var table = new Tabulator("#example-table", {
    columnHeaderVertAlign:"bottom", //align header contents to bottom of cell
});

Row Selection

You now have more control over which range of rows you want to select

Where you used to pass a boolean of true to the selectRow function to select all the active rows:

table.selectRow(true); //select active rows

You should now upass a string of active to the selectRow function:

table.selectRow("active"); //select active rows

v4.3 → 4.4 Upgrade

No breaking changes in this release. Upgrade in place.

v4.2 → 4.3 Upgrade

HTML Output

getHTML Function Output

The getHTML function has changed, where you used to have to pass in a boolean of true to retrieve the active table data

var htmlTable = table.getHtml(true);

You should now use:

var htmlTable = table.getHtml();

Column Visibility

The hideInHtml column definition property has been replaced with the htmlOutput property to provide functionality inline with the print, download and clipboard properties.

Where you used to hide a column in the results of the getHTML function by passing a value of false to the hideInHtml property

{title:"Name", field:"name", hideInHtml:true}

You should now use:

{title:"Hidden Column", field:"secret", htmlOutput:false}

v4.1 → 4.2 Upgrade

Downloaders

PDF Downloader Autotable Dependency Change

You only need to make this change if you use the PDF downloader in your project

The PDF downloader now uses the 3.0.5 version of the jspdf-autotable plugin to allow even more featers for PDF downloading.

Where you used to include the 2.3.2 version of the library

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.3.2/jspdf.plugin.autotable.js"></script>

You should now use the 3.0.5 version:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.0.5/jspdf.plugin.autotable.js"></script>

v4.0 → 4.1 Upgrade

Version 3.5 Upgrades

If you are upgrading from any version of tabulator below version 4.0, you should read the v3.5 to 4.0 upgrade guide first, as there were significant changes to the Tabulator API in the 4.0 release.

Clipboard

Include Column Headers In Clipboard Output

The clipboardCopyHeader option has now been depricated, where you used to use it:

var table = new Tabulator("#example-table", {
    clipboardCopyHeader:false, //disable header titles in copied data
});

You should now use:

var table = new Tabulator("#example-table", {
    clipboardCopyConfig:{
        columnHeaders:false, //don't include column headers in clipboard output
    },
});

Formatters

Tick Formatter

The tick formatter has now been depricated, where you used to use it:

{title:"Driver", field:"driver", formatter:"tick"},

You should now use:

{title:"Driver", field:"driver", formatter:"tickCross", formatterParams:{
	crossElement:false,
}},

Editors

Tick Editor

The tick editor has now been depricated, where you used to use it:

{title:"Driver", field:"driver", editor:"tick"},

You should now use:

{title:"Driver", field:"driver", editor:"tickCross"},

Select Editor Value

Passing values directly into the select editors editorParams object has now been depricated, where you used to use it:

{title:"Name", field:"name", editor:"select", editorParams:{
    "steve":"Steve Boberson",
    "bob":"Bob Jimmerson",
    "jim":"Jim Stevenson",
}}

You should now pass them into the values property of the editorParams object:

{title:"Name", field:"name", editor:"select", editorParams:{
    values:{
        "steve":"Steve Boberson",
        "bob":"Bob Jimmerson",
        "jim":"Jim Stevenson",
    }
}}

v3.5 → 4.0 Upgrade

Removal of jQuery

The core code of version 4.0 of Tabulator is now dependency free! That means no more jQuery, which means there are a few changes that need to be made to your existing code to get on board with the new way of doing things.

For a start this will mean that you no longer need to pull in any jQuery libraries with your code.

jQuery Wrapper

The process of converting away from jQuery can be quite time consuming so for those of you that want to keep on using the jQuery jQuery method of instantiating and function calls, not to worry, we now include a jQuery wrapper in /src/js/jquery_wrapper.min.js, as long as you include it in tour project after the Tabulato src files, you should be able to keep going as you are.

When using the wrapper you will still need to make sure that you use DOM Nodes instead of jQuery elements when returning from function or passing in arguments, the Editor and Formatter Return values and jQuery Element Values sections below will explain more.

New Instantiation Method

Now that we have removed jQuery, you can no longer use the jQuery UI widget to instantiate your table:

$("#example-table").tabulator({
	//table setup options
});

You now need to instantiate the Tabulator class, this will return a new Tabulator object that you can call all of the usual functions on. The first argument should be either a CSS selector for the table holding element or the DOM node of the table holding element The second argument should be your usual configuration object:

var table = new Tabulator("#example-table", {
	//table setup options
});

New Function Calls

With the removal of jQuery you no longer need to call the tabulator method on the selector to call a function

$("#example-table").tabulator("getRow", 1);

You can now call the function directly on your table object:

table.getRow(1);

Replacement By Regex

As there can be a lot of code to change for this, i found using a reg-ex find and replace to be the fastest solution. below are a couple of reg-ex's i have used for bulk find and replace. In the examples below you will need to replace the #example-table selector in the find regex with the selector for your table, and the table variable in the replace statement with your own variable name.

Find and replace functions with arguments:

//find
\$\("#example-table"\)\.tabulator\("([A-z]*)",

//replace
table.$1(

Find and replace functions without arguments:

//find
\$\("#example-table"\)\.tabulator\("([A-z]*)"\)

//replace
table.$1()

Editor and Formatter Return values

Any function that previously accepted a jQuery element as a return value, such as an editor or a formatter, will instead accept a DOM Node, if you were returning HTML previous then this will not affect you.

You can either completely rewrite your custom editor/formatter to remove the jQuery. or if you want to keep jQuery in your project and just want to upgrade to v4.0 then you need to adjust your function so that instead of returning a jQuery element:

var customEditor = function(cell, onRendered, success, cancel){
	var editor = $("<input></input>");
	return editor;
}

It should now return the DOM element from the jQuery, which as luck would have it we can access by looking for the first element in the array that the jQuery element returns, so you just need to append a [0] to your return statement.

var customEditor = function(cell, onRendered, success, cancel){
	var editor = $("<input></input>");
	return editor[0];
}

jQuery Element Values

Any function or property that previously accepted a jQuery element will instead accept a DOM node. You can either go through and change all of these statements, or as with the above example, pass the [0] of the jQuery element

Default Options

If you want to change the default options on a table, these now need to be changed on the defaultOptions object on the Tabulator prototype rahter that through a jQuery extend.

$.widget("ui.tabulator", $.ui.tabulator, {
    options: {
        resizableColumns:true,
        layout:"fitColumns"
    },
});

Should now be:

Tabulator.prototype.defaultOptions.resizableColumns = true;
Tabulator.prototype.defaultOptions.layout = "fitColumns";

As it was previously this needs to be done before any tables are created or they will not pickup the new default values.

NPM Package Change

With the removal of jQuery from the project, it seems sensible to change the NPM package.

The old jquery.tabulator package has been deprecated and will no longer be updated, all future updates will appear on the new tabulator-tables package.

To use the latest code you will need to remove the old package using NPM:

npm uninstall jquery.tabulator

And then install the new package:

npm install tabulator-tables --save

You will also need to replace any require statements in your code that pulled in the old package:

require('jquery.tabulator');

With require statements for the new package

require('tabulator-tables');

Ajax Updates

The Ajax system has been overhauled an now uses the built in fetch API rather than the jQuery function.

This means any ajax config objects passed into the setData function or the ajaxConfig setup property need to be converted from using the jQuery ajax config options:

var table = new Tabulator("#example-table", {
	ajaxConfig: {
		type:"post", //set request type to Position
		contentType: 'application/json; charset=utf-8', //set specific content type
	}
});

To using the fetch API config options:

var table = new Tabulator("#example-table", {
	ajaxConfig: {
	    method:"post", //set request type to Position
	    headers: {
	        "Content-type": 'application/json; charset=utf-8', //set specific content type
	    },
	}
});

A full list of the available config options can be found on the Fetch API Documentation.

Promises

Tabulator now takes full advantage of the Promise API to make it easier than ever to run asynchronouscommands in the correct order.

On the whole the switch to using Promises should have no impact on most functions as the promise is now returned from functions that previously had no return.

However the setPage, nextPage and previousPage functions that used to return booleans as success indicators:

var success = table.setPage(1);

if(success){
	//successful
}else{
	//failure
}

Now return promises instead:

table.setPage(1)
.then(function(){
	//success;
})
.catch(function(error){
	//failure
})

Extensions Renamed to Modules

The modular extensions that allow Tabulator to be packed full of features have now been renamed to Modules, at the moment that change is only skin deep and means the extendExtension function:

Tabulator.extendExtension("format", "formatters", {
    bold:function(cell, formatterParams){
        return "" + cell.getValue() + ""; //make the contents of the cell bold
    },
});

Has been renamed to extendModule:

Tabulator.prototype.extendModule("format", "formatters", {
    bold:function(cell, formatterParams){
        return "" + cell.getValue() + ""; //make the contents of the cell bold
    },
});

This is part of a bigger change that will be coming over the next year, on the roadmap to v5.0 where modules will become self contained pages of functionality that can inject functions onto the core Tabulator object and listen to lifecycle events from the table allowing anyone to write a module that can add awesome new features to Tabulator.

Callback Context

All callbacks now have the context of the Tabulator object so you can make calls to the table directly on the this variable.

So where you used to have to explicitly call a function on the parent table:

$("#example-table").tabulator({
    dataLoaded:function(data){
        var firstRow = $("#example-table").tabulator("getRows")[0];

        if(firstRow){
            firstRow.freeze();
        }
    },
});

You can now call it on this.

var table = new Tabulator("#example-table", {
    dataLoaded:function(data){
        var firstRow = this.getRows()[0];

        if(firstRow){
            firstRow.freeze();
        }
    },
});

Clipboard Styling

The clipboard module has been update and now copies the tables style along with the data to give a better visual appearance when pasted into other documents.

This functionality is included by default, if you want to only copy the unstyled data then you should set the clipboardCopyStyled option to false in the table options object:

var table = new Tabulator("#example-table", {
	clipboard:true,
	clipboardCopyStyled:false,
});

Pagination URL Generation

The paginator property for generating the pagination URL has been removed, to be replaced with the more general purpose ajaxURLGenerator function.

The old paginator option:

var table = new Tabulator("#example-table", {
    pagination:"remote", //enable remote pagination
    ajaxURL:"http://testdata.com/data", //set url for ajax request
    paginator: function(url, pageNo, pageSize, ajaxParams ){
        //url - the url from the ajaxURL parameter
        //pageNo - the requested page number
        //pageSize - the value of the paginationSize parameter
        //ajaxParams - the value of the ajaxParams parameter

        return ""; //must return the string of the page request URL
    },
});

The has been replaced be the new general purpose ajaxURLGenerator function, the pagination information such as page number and page size is now passed in the params argument:

var table = new Tabulator("#example-table", {
    pagination:"remote", //enable remote pagination
    ajaxURL:"http://testdata.com/data", //set url for ajax request
    ajaxURLGenerator:function(url, config, params){
        //url - the url from the ajaxURL property or setData function
        //config - the request config object from the ajaxConfig property
        //params - the params object from the ajaxParams property, this will also include any pagination, filter and sorting properties based on table setup

        //return request url
        return url + "?params=" + encodeURI(JSON.stringify(params)); //encode parameters as a json object
    },
});

IE Polyfills

Some of the core functionality of Tabulator has been migrated to using some of the newer JavaScript API's, as a result if you want your table to be compatible with IE you will need to include a couple of polyfills in your code.

Promises

Tabulator makes extensive use of the JavaScript Promise object to allow the table to work asynchronously. Unfortunatly this API is not available in IE11.

In order for Tabulator to work correctly you will need to install a polyfill to add the required functionality. We recommend taylorhakes/promise-polyfill for its small size and compatibility

Ajax

Tabulator uses the Fetch API to make its ajax requests for data. If you are using any ajax functionality and need Tabulator to work in IE 11 you will need to install a polyfill to add the required functionality.

We recommend github/fetch for its small size and compatibility

Removal Of Deprecated Functionality

The following deprecated functionality now been removed from Tabulator

Download Data Mutator

Deprecated Function

Setting the data download mutation function using the downloadDataMutator option:

$("#example-table").tabulator({
	downloadDataMutator:function(){},
});

Replacement Function

This has been replaced with the downloadDataFormatter option:

$("#example-table").tabulator({
	downloadDataFormatter:function(){},
});

Mutation Type

Deprecated Function

Binding the mutator callback to a given type of mutation using the mutateType option:

{title:"age", field:"age", mutator:ageMutator, mutatorParams:{limit:18}, mutateType:"edit"}

Replacement Function

You should now use the mutator option matching the type of event you want to bind to:

$("#example-table").tabulator({
	{title:"age", field:"age", mutatorEdit:ageMutator, mutatorEditParams:{limit:18}}
});

Persistence ID

Deprecated Function

Setting the persistent storage ID using the persistentLayoutID option:

$("#example-table").tabulator({
	persistentLayoutID:"table1",
});

Replacement Function

This has been replaced with the persistenceID option:

$("#example-table").tabulator({
	persistenceID:"table1",
});

Persistence Mode

Deprecated Function

Enabling column layout persistence and setting the persistent storage mode using the persistentLayout option:

$("#example-table").tabulator({
	persistentLayout:"cookie", //enable persistent column layout and set id
});

Replacement Function

You should now set the storage mode using the persistenceMode option and enable persistent column layouts with the persistentLayout option:

$("#example-table").tabulator({
	persistenceMode:"cookie", //set persistent storage mode
	persistentLayout:true, //enable persistent column layout
});

Email Formatter

Deprecated Function

Creating a mailto link using the email formatter:

{title:"Email", field:"email", formatter:"email"}

Replacement Function

This has been replaced with the link formatter with the new formatterParams of urlPrefix set to mailto::

{title:"Email", field:"email", formatter:"link", formatterParams:{urlPrefix:"mailto:"}}

fitColumns Setup Option

Deprecated Function

Setting the layout mode to fitColumns using the fitColumns option:

$("#example-table").tabulator({
	fitColumns:true, //enable fit columns layout mode
});

Replacement Function

This has been replaced with the layout option which allows the mode to be set to a number of different options including fitColumns:

$("#example-table").tabulator({
	layout:"fitColumns", //enable fitColumns layout mode
});

Get Filters

Deprecated Function

Getting the current filters using the getFilter function:

var filters = $("#example-table").tabulator("getFilter");

Replacement Function

This has been replaced with the getFilters function:

var filters = $("#example-table").tabulator("getFilters");

Get Sorters

Deprecated Function

Getting the current sorters using the getSort function:

var sorters = $("#example-table").tabulator("getSort");

Replacement Function

This has been replaced with the getSorters function:

var sorters = $("#example-table").tabulator("getSorters");

Header Tooltip

Deprecated Function

Setting a columns header tooltip using the tooltipHeader property in its column definition array:

{title:"name", field:"name", width:40, align:"center", tooltipHeader:true},

Replacement Function

This has been replaced with the headerTooltip property:

{title:"name", field:"name", width:40, align:"center", headerTooltip:true},

Ajax Sort Parameters

Ajax sorting now sends all current sorts instead of just the first, for more information checkout the Ajax Sorting Documentation

Deprecated Function

Setting the sort and sort_dir properties in the paginationDataSent option:

$("#example-table").tabulator({
	paginationDataSent:{
		"sort":"sort",
		"sort_dir":"sort_dir",
	}
});

Replacement Function

Sort data is now passed as an array to the sorters property of the paginationDataSent option:

$("#example-table").tabulator({
	paginationDataSent:{
		"sorters":"sorters",
	}
});

Ajax Filter Parameters

Ajax sorting now sends all current filters instead of just the first, for more information checkout the

Deprecated Function

Setting the filter, filter_value and filter_type properties in the paginationDataSent option:

$("#example-table").tabulator({
	paginationDataSent:{
		"filter":"filter",
		"filter_value":"filter_value",
		"filter_type":"filter_type",
	}
});

Replacement Function

Filter data is now passed as an array to the filters property of the paginationDataSent option:

$("#example-table").tabulator({
	paginationDataSent:{
		"filters":"filters",
	}
});

Version 6.5.0 Released!

Upgrade Guide

Sorting

Number Sorter

Importing

Callbacks

Data Edited Callback

Build

Build Source

Watch Source

Downloads

Column Header Title

Data Formatter

Custom File Formatters

Columns

Check Visibility

Group

Check Visibility

Vitrual DOM

Full Height Tables

Clipboard

Copy Selector

Copy Formatter

Copy Function

Printing

Styled Printing Option

Print Visible Rows

Programatic Printing

HTML Output

Cell Alignment

Autocomplete Editor

Column Deletion

Persistent Config

Sort Persistence

Filter Persistence

Column Layout Persistence

Active Row Retrieval

Get Active Rows

Get Active Row Data

Get Active Row Data Count

Column Headers

Vertical Alignment

Row Selection

HTML Output

getHTML Function Output

Column Visibility

Downloaders

PDF Downloader Autotable Dependency Change

Version 3.5 Upgrades

Clipboard

Include Column Headers In Clipboard Output

Formatters

Tick Formatter

Editors

Tick Editor

Select Editor Value

Removal of jQuery

jQuery Wrapper

New Instantiation Method

New Function Calls

Replacement By Regex

Editor and Formatter Return values

jQuery Element Values

Default Options

NPM Package Change

Ajax Updates

Promises

Extensions Renamed to Modules

Callback Context

Clipboard Styling

Pagination URL Generation

IE Polyfills

Promises

Ajax

Removal Of Deprecated Functionality

Download Data Mutator

Deprecated Function

Replacement Function

Mutation Type

Deprecated Function