Version 6.2 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.2

Upgrade Guide v5.2 to 5.3

Previous Version Upgrades

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

Row Positioning

The row positioning system has been completely rebuilt in this release, and now functions in a totally different way.

In previous releases, the row posiition was calculated from the unfilterd, un-layed out data, which was fine for simple tables, but when using grouped data or data trees resulted in positions and row numbers that did not match the actual position of the row in the visible table.

In this release row position is now calculated based on a rows display position in the table, and is based only on actual rows, group headers, frozen and calculation rows are excluded from the position data to keep row numbering consistent for actual rows.

The position of each row now also reflects their row number as shown in the rownum formatter, so that there is consitentcy between the rwo number shown to the user and the ros position. As a result of this row positions now start at 1 instead of 0.

As a result of this rows that are not currently displayed in the table, i.e. they have been filtered out, or are part of collapsed groups or collapsed data trees, no longer have a position as they are not curently part of the display calculations. In these cases a value of false will be returned from any position function to indicate the row is not currently displayed and has no position information.

If you use the getRowPosition or getRowFromPosition function, please read Row Position Documentation before upgrading.

Download

Download Ready

The downloadReady callback has been replaced with the downloadEncoder callback, which provides more synchronous control of the output file.

Anywhere you used to use the downloadReady option:

var table = new Tabulator("#example-table", {
    downloadReady:function(fileContents, blob){
        //fileContents - the unencoded contents of the file
        //blob - the blob object for the download

        //custom action to send blob to server could be included here

        return blob; //must return a blob to proceed with the download, return false to abort download
    }
});

You should now use the downloadEncoder option, taking care that the new function must actually encode the blob, it can no longer be passed through from the function arguments.

var table = new Tabulator("#example-table", {
    downloadEncoder:function(fileContents, mimeType){
        //fileContents - the unencoded contents of the file
        //mimeType - the suggested mime type for the output

        //custom action to send blob to server could be included here

        return new Blob([fileContents], {type:mimeType}); //must return a blob to proceed with the download, return false to abort download
    }
});

SCSS Variables

If you have been making custom themes for your tables using the built in SCSS templates, then you will need to make a couple of changes in this release.

Header Separator

A spelling mistake has been fixed in the headerSeparatorColor variable. It has now been replaced with the correctly spelt headerSeparatorColor variable.

Anywhere you used to use the headerSeparatorColor variable:

$headerSeparatorColor:#ff000;
...
border-color:$headerSeparatorColor;

You will now need to use the new headerSeparatorColor variable:

$headerSeparatorColor:#ff000;
...
border-color:$headerSeparatorColor;

Footer Separator

A spelling mistake has been fixed in the footerSeparatorColor variable. It has now been replaced with the correctly spelt footerSeparatorColor variable.

Anywhere you used to use the footerSeparatorColor variable:

$footerSeparatorColor:#ff000;
...
border-color:$footerSeparatorColor;

You will now need to use the new footerSeparatorColor variable:

$footerSeparatorColor:#ff000;
...
border-color:$footerSeparatorColor;

Classes

Editing

The tabulator-row-editing class has been renamed in this release to tabulator-editing to improve consistency in class naming

Anywhere you used to use the tabulator-row-editing class:

.tabulator-row.tabulator-row-editing{
    background:#f00;
}

Anywhere you should now use the tabulator-editing class:

.tabulator-row.tabulator-editing{
    background:#f00;
}
Donate