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
});
General Table Configuration
Option
Data Type
Default Value
Description
height
string/int
false
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.
virtualDom
boolean
true
Enable rendering using the Virtual DOM engine
virtualDomBuffer
integer
false
Manually set the size of the virtual DOM buffer
placeholder
string/DOM Node
""
placeholder element to display on empty table
footerElement
string/DOM Node
(see documentation)
Footer element for the table
tooltips
boolean/function
false
Function to generate tooltips for cells
tooltipGenerationMode
string
"load"
When to regenerate cell tooltip value
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
downloadDataFormatter
function
false
callback function to alter table data before download
downloadConfig
object
object
choose which parts of the table are included in downloaded files
htmlOutputConfig
object
object
choose which parts of the table are included in getHtml function output
reactiveData
boolean
false
enable data reactivity
Columns
Option
Data Type
Default Value
Description
columns
array
[]
Holder for column definition array
autoColumns
boolean
false
Automatically generate column definitions for the table based on the structure of the first row of data
layout
string
"fitData"
Layout mode for the table columns
layoutColumnsOnNewData
boolean
false
Change column widths to match data when loaded into table
responsiveLayout
boolean
false
Automatically hide/show columns to fit the width of the Tabulator element
responsiveLayoutCollapseStartOpen
boolean
true
show collapsed column list
responsiveLayoutCollapseUseFormatters
boolean
true
use formatters in collapsed column lists
responsiveLayoutCollapseFormatter
function
create contents of collapsed column list
columnMinWidth
CSS width value
40px
Minimum width for a column
resizableColumns
boolean
true
Allow user to resize columns (via handles on the left and right edges of the column header)
movableColumns
boolean
false
Allow users to move and reorder columns
tooltipsHeader
boolean/function
false
Function to generate tooltips for column headers
columnVertAlign
string
top
Vertical alignment for contents of column header (used in column grouping)
headerFilterPlaceholder
string
"filter column..."
The placeholder text to be set in any header filter input elements
scrollToColumnPosition
string
"left"
Default column position after scrollToColumn
scrollToColumnIfVisible
boolean
false
Allow currently visible columns to be scrolled to
columnCalcs
string/boolean
true
Where to show column calcs in table
nestedFieldSeparator
string/boolean
"."
Character used to separate nested fields in column definition
headerVisible
boolean
true
Disable column header bar
Rows
Option
Data Type
Default Value
Description
rowFormatter
function/boolean
false
Function to alter layout of rows
addRowPos
string
"bottom"
The position in the table for new rows to be added, "bottom" or "top"
selectable
boolean/integer/string
"highlight"
Enable/Disable row selection
selectableRollingSelection
boolean
true
Allow rolling selection
selectablePersistence
boolean
true
Maintain selected rows on filter or sort
selectableCheck
function
(see documentation)
Check if row should be selectable or unselectable
movableRows
boolean
false
Allow users to move and reorder rows
movableRowsConnectedTables
string/DOM Node
false
Connection selector for receiving tables
movableRowsSender
string/function/boolean
false
Sender function to be executed when row has been sent
movableRowsReceiver
string/function
"insert"
Sender function to be executed when row has been received
resizableRows
boolean
false
Allow user to resize rows (via handles on the top and bottom edges of the row)
scrollToRowPosition
string
"top"
Default row position after scrollToRow
scrollToRowIfVisible
boolean
false
Allow currently visible rows to be scrolled to
Data
Option
Data Type
Default Value
Description
index
string
id
The field to be used as the unique index for each row
data
array
[]
Array to hold data that should be loaded on table creation
ajaxURL
string/boolean
false
URL for remote Ajax data loading
ajaxParams
object
{}
Parameters to be passed to remote Ajax data loading request
ajaxConfig
string/object
"GET"
The HTTP request type for Ajax requests or config object for the request
ajaxContentType
string/object
"form"
set the content encoding for the json request
ajaxURLGenerator
function
false
callback function to generate request URL
ajaxRequestFunc
function
false
callback function to replace inbuilt ajax request functionality
ajaxFiltering
boolean
false
Send filter config to server instead of processing locally
ajaxSorting
boolean
false
Send sorter config to server instead of processing locally
ajaxProgressiveLoad
boolean
false
Progressively load data into the table in chunks
ajaxProgressiveLoadDelay
integer
0
Delay in milliseconds between each progressive load request
ajaxProgressiveLoadScrollMargin
integer
false
The remaining distance in pixels between the scroll bar and the bottom of the table before an ajax is triggered
ajaxLoader
boolean/function
true
Show loader while data is loading, can also take a function that must return a boolean
ajaxLoaderLoading
string
html (see below)
html for loader element
ajaxLoaderError
string
html (see below)
html for the loader element 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.