Version 6.3 Released!

Click to checkout the new features
Old Documentation
You are browsing documentation for an old version of Tabulator. Consider upgrading your project to Tabulator 6.3

Upgrade Guide v4.4 to 4.5

Previous Version Upgrades

If you are upgrading from any version of tabulator below version 4.4, you should read the v4.1 to 4.4 upgrade guide first.

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
Donate