Upgrade Guide

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

• v5.6
• v5.5
• v5.4
• v5.3
• v5.2
• v5.1
• v5.0

v5.5 → 5.6 Upgrade

Row Selection

With the addition of the range selection module, all row selection options have now been renamed for clarity.

Enable Row Selection

Anywhere you used the selectable option:

var table = new Tabulator("#example-table", {
    selectable:true, //make rows selectable
});

You should now use the selectableRows option:

var table = new Tabulator("#example-table", {
    selectableRows:true, //make rows selectable
});

Rolling Row Selection

Anywhere you used the selectableRollingSelection option:

var table = new Tabulator("#example-table", {
    selectableRollingSelection:false, //disable rolling selection
});

You should now use the selectableRowsRollingSelection option:

var table = new Tabulator("#example-table", {
    selectableRowsRollingSelection:false, //disable rolling selection
});

Range Mode

Anywhere you used the selectableRangeMode option:

var table = new Tabulator("#example-table", {
    selectableRangeMode:"click", //select row range on click
});

You should now use the selectableRowsRangeMode option:

var table = new Tabulator("#example-table", {
    selectableRowsRangeMode:"click", //select row range on click
});

Persistent Selection

Anywhere you used the selectablePersistence option:

var table = new Tabulator("#example-table", {
    selectablePersistence:false, //disable selection peristence
});

You should now use the selectableRowsPersistence option:

var table = new Tabulator("#example-table", {
    selectableRowsPersistence:false, //disable selection peristence
});

Persistent Selection

Anywhere you used the selectableCheck option:

var table = new Tabulator("#example-table", {
    selectableCheck:function(row){
        //row - row component
        return row.getData().age > 18; //allow selection of rows where the age is greater than 18
    },
});

You should now use the selectableRowsCheck option:

var table = new Tabulator("#example-table", {
    selectableRowsCheck:function(row){
        //row - row component
        return row.getData().age > 18; //allow selection of rows where the age is greater than 18
    }
});

v5.4 → 5.5 Upgrade

No breaking changes in this release. Upgrade in place.

v5.3 → 5.4 Upgrade

No breaking changes in this release. Upgrade in place.

v5.2 → 5.3 Upgrade

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;
}

v5.1 → 5.2 Upgrade

Menus

Menu Containter

As a result of the introduction of the built in popup functionality in this release, the menu module is no longer responsible for creation of its own popups.

For this reason the module specific menuContainer has been replaced with the table wide popupContainer option.

Anywhere you used to use the menuContainer option:

var table = new Tabulator("#example-table", {
    menuContainer:true, //show menus relative to the table element
});

You should now use the popupContainer option:

var table = new Tabulator("#example-table", {
    popupContainer:true, //show menus and other popups relative to the table element
});

Menu Generation Functions

The order of the arguments passed into the menu generation function on any of the standard menu options has been changed, to fit with the general pattern throughout Tabulator of the event being the first argument passed into a function

Any of the menu generation functions with the argument list that was ordered component, then e

var table = new Tabulator("#example-table", {
    rowContextMenu: function(component, e){

    }
});

Should swap the arguments round to be e, then component

var table = new Tabulator("#example-table", {
    rowContextMenu: function(e, component){

    }
});

Tooltips

With the migration of tooltip functionality to the new Tooltip module the tooltipGenerationMode has become redundant and can be removed.

You should remove any use of the tooltipGenerationMode option:

var table = new Tabulator("#example-table", {
    tooltipGenerationMode:"hover",
});

Editors

Select Editor

The select editor has been removed in this release and replaced with the more configurable list editor.

Column definitions using the select editor

{title:"Example", field:"example", editor:"select"}

Should be replaced with the list editor

{title:"Example", field:"example", editor:"list"}

Autocomplete Editor

The autocomplete editor has been removed in this release and replaced with the more configurable list editor.

Column definitions using the autocomplete editor

{title:"Example", field:"example", editor:"autocomplete"}

Should be replaced with the list editor

{title:"Example", field:"example", editor:"list", editorParams:{autocomplete:true}}

Validation

Cell Component Validity

The cell component isValid function has been updated to return a value of true if the cell passes validation, or an array of failed validators if it fails validation.

So where you used to check if a cell was valid by checking the trutheyness of the retured value:

var validCell = cell.isValid();

You will now have to check that it is explicitly true otherwise the array off failed validators returned when it fails would show as a pass.

var validCell = cell.isValid() === true;

v5.0 → 5.1 Upgrade

File Importing

File importing has now been moved to the Import module. As a result the setDataFromLocalFile function has been replaced with the import function.

Anywhere you used to call the setDataFromLocalFile function

table.setDataFromLocalFile(); //load data from json file into the table

You should now call the import function

table.import("json", ".json"); //load data from json file into the table

v4.9 → 5.0 Upgrade

Importing

Import Statements

Tabulator has now moved exclusivly to using ESM modular imports, for this reason you can no longer require Tabulator into your project:

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

You must now use the following Import statement

import {TabulatorFull as Tabulator} from 'tabulator-tables';

You may also now need to import additional modules for your table, for full details see the Install Setup Guide

Core With Optional Modules

In version 4.x you used to be able to pull in the core tabulator file and import modules by including individual module files from the dist/js/modules folder

<script type="text/javascript" src="dist/js/tabulator_core.min.js"></script>
<script type="text/javascript" src="dist/js/modulesformat.min.js"></script>

This is now achieved by importing the Tabulator class along with any required modules and then binding these together using the registerModule function on the class.

import {Tabulator, FormatModule, EditModule} from 'tabulator-tables';

Tabulator.registerModule([FormatModule, EditModule]);

Initialization

Tabulator has now moved to an asynchronous initialization process.

This allows a consistent initialization experience between async and synchronous data sources, and allows binding of the new events system to the table before initialization is completed, to catch things like the tableBuilt event.

As a result of this it is no longer possible to call functions that change the setut of the table such as setData and setColumns straight after the table constructor.

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

table.setData(data);

Initialization Values

In the first instance you should now use the data and columns options to set these in the table constructor

var table = new Tabulator("#example-table", {
  data:[],
  columns:[],
});

Functional Update

If you do need to call these functions straight after table initialization for whatever reason, you should call them after the tableBuilt event, which indicates the table has been initialized and is ready to be updated

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

//update columns after it is built
table.on("tableBuilt", function(){
    table.setColumns(columns);
});

Build Tools

In version 4.x you used to trigger the build tools to watch for changes using the watch command

npm run watch

To achieve this you should now use the dev command

npm run dev

Extending Modules

When extending modules, you used to call the extendModule function on the Tabulator prototype:

Tabulator.prototype.extendModule("format", "formatters", {
    bold:function(cell, formatterParams){}
});

You should now call this function directly on the Tabulator class

Tabulator.extendModule("format", "formatters", {
    bold:function(cell, formatterParams){}
});

Default Table Options

When setting default table options, these used to be defined on the defaultOptions property of the Tabulator prototype:

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

The defaultOptions object should now be accessed directly on the Tabulator class

Tabulator.defaultOptions.movableRows = true;
Tabulator.defaultOptions.layout = "fitColumns";

Renderers

With renderers now being separated from the core codebase the options for enabling/disabling the virtual DOM have now been renamed

Vertical Renderers

Disabling the Vertical Virtual DOM

To disable the vertical virtual DOM you used to set the virtualDom option false:

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

You should now set the renderVertical option to basic

var table = new Tabulator("#example-table", {
    renderVertical:"basic",
});

Render Buffer

To set the size of the vertical render buffer, you used to set the value on the virtualDomBuffer option:

var table = new Tabulator("#example-table", {
    virtualDomBuffer:300,
});

You should now set it on the renderVerticalBuffer

var table = new Tabulator("#example-table", {
    renderVerticalBuffer:300,
});

Horizontal Renderers

Enabling the Horizontal Virtual DOM

To enable the horizontal virtual DOM you used to set the virtualDomHoz option true:

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

You should now set the renderHorizontal option to virtual

var table = new Tabulator("#example-table", {
    renderHorizontal:"virtual",
});

Finding Tables

When finding tables, the findTable function was called on the Tabulator prototype:

var table = Tabulator.prototype.findTable("#example-table")[0]; // find table object for table with id of example-table

The findTable function should now be called directly on the Tabulator class

var table = Tabulator.findTable("#example-table")[0]; // find table object for table with id of example-table

Themes

The structure of of the /dist/css/ folder has been updated to make themes easier to find

Bootstrap 3

You used to import the bootstrap 3 theme from inside the /bootstrap folder.

<link href="/dist/css/bootstrap/tabulator_bootstrap.min.css" rel="stylesheet">

You can now import it directly from the /dist/css folder. You will also note that the file is now called bootstrap3.css to make it clear which version of bootstrap the style is from

<link href="/dist/css/tabulator_bootstrap3.min.css" rel="stylesheet">

Bootstrap 4

You used to import the bootstrap 4 theme from inside the /bootstrap folder.

<link href="/dist/css/bootstrap/tabulator_bootstrap4.min.css" rel="stylesheet">

You can now import it directly from the /dist/css folder.

<link href="/dist/css/tabulator_bootstrap4.min.css" rel="stylesheet">

Semantic UI

You used to import the Semantic UI theme from inside the /semantic-ui folder.

<link href="/dist/css/semantic-ui/tabulator_semantic-ui.min.css" rel="stylesheet">

You can now import it directly from the /dist/css folder. You will also note that the file is now called tabulator_semanticui.css to match the naming convention of the other themes

<link href="/dist/css/tabulator_semanticui.min.css" rel="stylesheet">

Bulma

You used to import the bulma theme from inside the /bulma folder.

<link href="/dist/css/bulma/tabulator_bulma.min.css" rel="stylesheet">

You can now import it directly from the /dist/css folder.

<link href="/dist/css/tabulator_bulma.min.css" rel="stylesheet">

Materialize

You used to import the materialize theme from inside the /materialize folder.

<link href="/dist/css/materialize/tabulator_materialize.min.css" rel="stylesheet">

You can now import it directly from the /dist/css folder.

<link href="/dist/css/tabulator_materialize.min.css" rel="stylesheet">

Column Defaults

With the inclusion of the new columnDefaults option, a number of table options that used to configure all rows have become redundant. This section lists the old table options and their new default options

Horizontal Align Cells

You used to globally set the horizontal alignment of cells using the cellHozAlign option

var table = new Tabulator("#example-table", {
    cellHozAlign:"left",
});

You should now set it using the hozAlign propety in the columnDefaults option

var table = new Tabulator("#example-table", {
    columnDefaults:{
        hozAlign:"left",
    }
});

Vertical Align Cells

You used to globally set the vertical alignment of cells using the cellVertAlign option

var table = new Tabulator("#example-table", {
    cellVertAlign:"top",
});

You should now set it using the vertAlign propety in the columnDefaults option

var table = new Tabulator("#example-table", {
    columnDefaults:{
        vertAlign:"top",
    }
});

Horizontal Align Column Headers

You used to globally set the horizontal alignment of column headers using the headerHozAlign option

var table = new Tabulator("#example-table", {
    headerHozAlign:"left",
});

You should now set it using the headerHozAlign propety in the columnDefaults option

var table = new Tabulator("#example-table", {
    columnDefaults:{
        headerHozAlign:"left",
    }
});

Column Min Width

You used to globally set the minimum width of columns using the columnMinWidth option

var table = new Tabulator("#example-table", {
    columnMinWidth:20,
});

You should now set it using the minWidth property in the columnDefaults option

var table = new Tabulator("#example-table", {
    columnDefaults:{
        minWidth:20,
    }
});

Column Max Width

You used to globally set the maximum width of columns using the columnMaxWidth option

var table = new Tabulator("#example-table", {
    columnMaxWidth:20,
});

You should now set it using the maxWidth property in the columnDefaults option

var table = new Tabulator("#example-table", {
    columnDefaults:{
        maxWidth:20,
    }
});

Resizable Columns

You used to globally set resiable columns using the resizableColumns option

var table = new Tabulator("#example-table", {
    resizableColumns:"header",
});

You should now set it using the resizable property in the columnDefaults option

var table = new Tabulator("#example-table", {
    columnDefaults:{
        resizable:"header",
    }
});

Cell Tooltips

You used to globally set cell tooltips using the tooltips option

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

You should now set it using the tooltip property in the columnDefaults option

var table = new Tabulator("#example-table", {
    columnDefaults:{
        tooltip:true,
    }
});

Header Tooltips

You used to globally set header tooltips using the tooltipsHeader option

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

You should now set it using the headerTooltip property in the columnDefaults option

var table = new Tabulator("#example-table", {
    columnDefaults:{
        headerTooltip:true,
    }
});

Header Filter Placeholder

You used to globally set header filter placeholder text using the headerFilterPlaceholder option

var table = new Tabulator("#example-table", {
    headerFilterPlaceholder:"Filter Values",
});

You should now set it using the headerFilterPlaceholder property in the columnDefaults option

var table = new Tabulator("#example-table", {
    columnDefaults:{
        headerFilterPlaceholder:"Filter Values",
    }
});

Header Sort

You used to globally set header sorting using the headerSort option

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

You should now set it using the headerSort property in the columnDefaults option

var table = new Tabulator("#example-table", {
    columnDefaults:{
        headerSort:true,
    }
});

Header Sort Tristate

You used to globally set tristate header sorting using the headerSortTristate option

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

You should now set it using the headerSortTristate property in the columnDefaults option

var table = new Tabulator("#example-table", {
    columnDefaults:{
        headerSortTristate:true,
    }
});

Callbacks

The whole table event callbacks that you used to set on the table in the constructor object have now been replaced with an event subscription model.

So where you used to bind the callback in the constructor:

var table = new Tabulator("#example-table", {
    dataLoaded: function(){
        //do something
    }
});

You now subscribe to the event after you have instantiated the table:

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

table.on("dataLoaded", function(){
    //do something
})

The callbacks that have changed to events are:

Ajax and Data Loading

Events

With the creation of the new data loading system, all the old ajax events have been removed and the data loading events have changed purpose to show any data being loaded into the table.

You will now need to map your ajax events to the new data loading events

Ajax Loading

Where you used to subscribe to the ajaxLoading event

table.on("ajaxLoading", function(){
    //do something
})

You should now subscribe to the dataLoading event

table.on("dataLoading", function(){
    //do something
})

Ajax Loaded

Where you used to subscribe to the ajaxLoaded event

table.on("ajaxLoaded", function(){
    //do something
})

You should now subscribe to the dataLoading event

table.on("dataLoading", function(){
    //do something
})

Ajax Error

Where you used to subscribe to the dataLoadError event

table.on("dataLoadError", function(){
    //do something
})

You should now subscribe to the dataLoading event

table.on("dataLoading", function(){
    //do something
})

Data Loaders

With the creation of the new data loading system, all the old ajax loaders have been changed to data loaders.

You will now need to map your ajax loader options to the new data loader options

Data Loader

Where you used to disable the ajax loader using the ajaxLoader option

var table = new Tabulator("#example-table", {
    ajaxLoader:false, //disable ajax loader
});

You should now use the the dataLoader option

var table = new Tabulator("#example-table", {
    dataLoader:false, //disable remote loader
});

Data Loading Message

Where you used to set the ajax loader message using the ajaxLoaderLoading option

var table = new Tabulator("#example-table", {
    ajaxLoaderLoading:"Loading Data",
});

You should now use the the dataLoaderLoading option

var table = new Tabulator("#example-table", {
    dataLoaderLoading:"Loading Data",
});

Data Loading Error Message

Where you used to set the ajax loader error message using the ajaxLoaderError option

var table = new Tabulator("#example-table", {
    ajaxLoaderError:"Loading Error",
});

You should now use the the dataLoaderError option

var table = new Tabulator("#example-table", {
    dataLoaderError:"Loading Error",
});

Localization

Ajax Request Localization

With the moving of the loaders out of the ajax module, their correspoing localization mappings have also changed

Where you used to set the ajax loader messaging in the ajax property of a lang definition object

var table = new Tabulator("#example-table", {
    locale:true,
    langs:{
        "en-gb":{
            "ajax":{
                "loading":"Loading", //data loader text
                "error":"Error", //data error text
            },
        }
    },
});

You should now set it on the data property

var table = new Tabulator("#example-table", {
    locale:true,
    langs:{
        "en-gb":{
            "data":{
                "loading":"Loading", //data loader text
                "error":"Error", //data error text
            },
        }
    },
});

Request & Response Params Mapping

The paginationDataSent and paginationDataReceived options that were used to map the pramters of incoming and outgoing request parameters have been moved out of the pagination module and incoporated into the data loader. As sunch their names have now been changed

Map Request Params

Where you used to define the param map with the paginationDataSent option.

var table = new Tabulator("#example-table", {
  paginationDataSent:{
    page:"current_page",
    size:"page_size",
  },
});

You should now use the dataSendParams option

var table = new Tabulator("#example-table", {
  dataSendParams:{
    page:"current_page",
    size:"page_size",
  },
});

Map Response Params

Where you used to define the param map with the paginationDataReceived option.

var table = new Tabulator("#example-table", {
  paginationDataReceived:{
    last_page:"last",
    size:"page_data",
  },
});

You should now use the dataReceiveParams option

var table = new Tabulator("#example-table", {
  dataReceiveParams:{
    last_page:"last",
    size:"page_data",
  },
});

Progressive Loading

Now that ajax functionality has been isolated from data loading the progressive load functionality has been move out of the ajax module.

As a result of this all progressive load table options have now changed name to remove the "ajax" prefix

Progressive Load Type

Where you used to use the ajaxProgressiveLoad option to set the type of load to be used

var table = new Tabulator("#example-table", {
    ajaxProgressiveLoad:"scroll",
});

You should now use the progressiveLoad option

var table = new Tabulator("#example-table", {
    progressiveLoad:"scroll",
});

Progressive Load Delay

Where you used to use the ajaxProgressiveLoadDelay option to set the progressive load delay

var table = new Tabulator("#example-table", {
    ajaxProgressiveLoadDelay:300,
});

You should now use the progressiveLoadDelay option

var table = new Tabulator("#example-table", {
    progressiveLoadDelay:300,
});

Progressive Load Scroll Margin

Where you used to use the ajaxProgressiveLoadScrollMargin option to set the progressive load scroll margin

var table = new Tabulator("#example-table", {
    ajaxProgressiveLoadScrollMargin:30,
});

You should now use the progressiveLoadScrollMargin option

var table = new Tabulator("#example-table", {
    progressiveLoadScrollMargin:30,
});

Sorting

Remote Sorting

You used to enable remote sorting using the ajaxSorting option

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

You should now use the sortMode option

var table = new Tabulator("#example-table", {
    sortMode:"remote",
});

Date and Time Sorting

In previous version of the library Tabulator used the moment.js library for date and time sorting. When sorting a column with a date, time or datetime sorter, you needed to include the moment library in your code

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>

In this release this has now been replaced with the much more compact luxon.js library. Which can be included from the following CDN:

<script src="https://cdn.jsdelivr.net/npm/luxon/build/global/luxon.min.js"></script>

Formatting

DateTime Formatting

In previous version of the library Tabulator used the moment.js library for date and time formatting. When formatting a cell with a datetime or datetimediff formatter, you needed to include the moment library in your code

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>

In this release this has now been replaced with the much more compact luxon.js library. Which can be included from the following CDN:

<script src="https://cdn.jsdelivr.net/npm/luxon/build/global/luxon.min.js"></script>

Filter

You used to enable remote fitering using the ajaxFiltering option

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

You should now use the filterMode option

var table = new Tabulator("#example-table", {
    filterMode:"remote",
});

Pagination

You used to enable remote fitering using the pagination option

var table = new Tabulator("#example-table", {
  pagination:"remote",
});

You should now use the pagination option to enable pagination and the paginationMode option to set it to remote mode

var table = new Tabulator("#example-table", {
    pagination:true,
    paginationMode:"remote",
});

Downloaders

PDF Downloader

The PDF downloader now uses the latest version of the jspdf library to generate its PDF file.

You used to include the old versions of the jspdf libraries.

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

You should now include the new libraries instead

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

Cell Navigation

Cell navigation functions have been moved from inside the nav function to directly on the cell component.

Where you used to access cell navigation functions on the cell component by calling the nav function, and then a direction function like up:

cell.nav().up()

You now navigate using function names starting with navigate and then the direction, such as Up:

cell.navigateUp()

This is the case for all navigation functions, up, down, left, right, prev and next.

Debug Options

The invalidOptionWarning option has been renamed to debugInvalidOptions to fit in with the new range of debug tools.

So where you used to disable invalid option warnings with the invalidOptionWarning option

var table = new Tabulator("#example-table", {
    invalidOptionWarning:false, //disable option warnings
});

You should now use the debugInvalidOptions option

var table = new Tabulator("#example-table", {
    debugInvalidOptions:false, //disable option warnings
});