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

Persistent Configuration

Overview

Tabulator can store a variety of table setup options so that each time a user comes back to the page, the table is laid out just as they left it.

Persistence Mode

Persistence information can either be stored in a cookie or in the localSotrage object, you can use the persistenceMode to choose which. It can take three possible values:

  • local - (string) Store the persistence information in the localStorage object
  • cookie - (string) Store the persistence information in a cookie
  • true - (boolean) check if localStorage is available and store persistence information, otherwise store in cookie (Default option)
var table = new Tabulator("#example-table", {
    persistenceMode:"cookie", //store persistence information in a cookie
});

Persistence ID

If you are planning on having multiple tables on the same page using persistence then Tabulator needs a way to uniquely identify each table. There are two ways to do this either set the id attribute on the element that will hold the table, Tabulator will automatically use this id as a reference for the persistence id.

<div id="example-table"></div>

Alternatively if you do not want to give an id to the table holding element you can set the tabulator options parameter persistenceID to a unique persistence id for that table.

var table = new Tabulator("#example-table", {
    persistenceID:"example1", //id string, can only be numbers, letters, hyphens and underscores.
    persistentLayout:true, //Enable column layout persistence
});

Persistent Column Layout

You can ensure the layout of columns is stored for the next page load by setting the persistentLayout option to true

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

Note: If you update the column definition array after the the column layout has been stored, Tabulator will attempt to match the stored columns against the new definition. If you have any issues with column definitions updating then you will have to change the persistenceID or delete your cookies/local storage to clear out the old column layout information.

Get Column Layout Information

If you want to handle column layout persistence manually, for example storing it in a database to use elsewhere, you can use the getColumnLayout function to retrieve a layout object for the current table.

var columnLayout = table.getColumnLayout();

Set Column Layout

If you have previously used the getColumnLayout function to retrieve a tables layout, you can use the setColumnLayout function to apply it to a table.

table.setColumnLayout(columnLayout);

Persistent Sort

You can ensure the data sorting is stored for the next page load by setting the persistentSort option to true

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

Persistent Filter

You can ensure the data filtering is stored for the next page load by setting the persistentFilter option to true

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

Note: Only built-in filters can be stored (including module), custom filter functions cannot be persistently stored.

Note: Header filters are not currently stored persistently, this feature will be coming in a future release.

Donate