Tabulator has a wide range of setup options to help you customise the user experience of your tables. This section outlines all the available options and links to the relevant section in this documentation to show you how to use them.
Each of these options can be set in the constructor object when you define your Tabulator.
var table = new Tabulator("#example-table", {
height:"300px", //set the table height option
});
Sets the height of the containing element, can be set to any valid height css value. If set to false (the default), the height of the table will resize to fit the table data.
minHeight
string/int
false
Sets the minimum height for the table, can be set to any valid height css value.
maxHeight
string/int
false
Sets the maximum height for the table, can be set to any valid height css value.
renderVertical
string
"virtual"
Set the tables vertical renderer
renderVerticalBuffer
integer
false
Manually set the size of the vertical renderer buffer
renderHorizontal
string
"basic"
Set the tables horizontal renderer
placeholder
string/DOM Node
""
placeholder element to display on empty table
footerElement
string/DOM Node
(see documentation)
Footer element for the table
history
boolean/function
false
Enable user interaction history functionality
keybindings
boolean/function
false
Keybinding configuration object
locale
string/boolean
false
set the current localization language
langs
object
(see documentation)
hold localization templates
downloadConfig
object
object
choose which parts of the table are included in downloaded files
downloadRowRange
string
"active"
set the range of rows to be included in the downloaded table output
htmlOutputConfig
object
object
choose which parts of the table are included in getHtml function output
reactiveData
boolean
false
enable data reactivity
tabEndNewRow
boolean/object/function
false
add new row when user tabs of the end of the table
Lookup list to link expected data fields from the server to their function
filterMode
string
"local"
Send filter config to server instead of processing locally
sortMode
string
"local"
Send sorter config to server instead of processing locally
progressiveLoad
boolean
false
Progressively load data into the table in chunks
progressiveLoadDelay
integer
0
Delay in milliseconds between each progressive load request
progressiveLoadScrollMargin
integer
false
The remaining distance in pixels between the scroll bar and the bottom of the table before an ajax is triggered
importFormat
string/function
The importer for the incoming table data
importReader
string
"text"
The type of file reader to be used to import a dataset from a file
dataLoader
boolean/function
true
Show loader while data is loading, can also take a function that must return a boolean
dataLoaderLoading
string
html (see below)
html for loader element
dataLoaderError
string
html (see below)
html for the loader element in the event of an error
dataLoaderErrorTimeout
integer
3000
The number of milliseconds to display the loader error message in the event of an error
When loading data, Tabulator can display a loading overlay over the table. This consists of a modal background and a loader element. The loader element can be set globally in the options and should be specified as a div with a display style of inline-block.
When you first create a table, the constructor function returns the instance of that table to a variable:
var table = new Tabulator("#example-table", {
height:"300px", //set the table height option
});
Sometimes you may want to access this table but not have easy access to the variable that the table was stored in.
The good news is that Tabulator keeps track of all tables that it creates and you can use the findTable function on the Tabulator class to lookup the table object for any existing table using the element they were created on.
The findTable function will accept a valid CSS selector string or a DOM node for the table as its first argument.
var table = Tabulator.findTable("#example-table")[0]; // find table object for table with id of example-table
The findTable function will return an array of matching tables. If no match is found it will return false
If you pass the same setup options to your Tabulator constructor object into every table you build on a page, then you can simplify your table setup process by setting these globally for all tables.
You can do this by setting the options on the defaultOptions object on the Tabulator class, these will then automatically apply to any new Tabulator's unless the value is overwritten in a specific tables construction object when you create a new table.
For example the below code will cause all Tabulators to have movable rows by default and set the layout mode to fitColumns.
These options must be set on Tabulator after it has been included in your project but before any tables are instantiated.
Overriding Default Options
If you define an option in your defaultOptions object then it is possible to override it on a specific table by including the replacement for that option in the table constructor:
//Set Default option for all tables
Tabulator.defaultOptions.layout = "fitColumns";
//Override default option in a specific table
var table = new Tabulator("#example-table", {
layout:"fitData", //override specific default option
});
Object Properties It is worth noting that any option defined in a table will completely replace the default option. If you are using an object or array as the value for the property you are overriding, it will not merge the values of each property of the object, it will completely replace the default object with the new one defined in your table.