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.
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
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
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
validationMode
string
"blocking"
set validation mode of the table
textDirection
string
"auto"
set text direction for the table
debugInvalidOptions
boolean
true
show console warnings if invalid options are used
Columns
Option
Data Type
Default Value
Description
columns
array
[]
Holder for column definition array
columnDefaults
object
{}
define any default options that should be applied to all columns
autoColumns
boolean
false
Automatically generate column definitions for the table based on the structure of the first row of data
autoColumnsDefinitions
function/array/object
false
Manipulate the automatically generated column definitions
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
movableColumns
boolean
false
Allow users to move and reorder columns
columnHeaderVertAlign
string
top
Vertical alignment for contents of column header (used in column grouping)
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
rowFormatterPrint
function/boolean
null
Function to alter layout of rows when printed
rowFormatterClipboard
function/boolean
null
Function to alter layout of rows when copied to the clipboard
rowFormatterHtmlOutput
function/boolean
null
Function to alter layout of rows when the getHtml formatter is called
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
movableRowsConnectedElements
string/DOM Node
false
Connection selector for receiving elements
movableRowsElementDrop
function
false
Callback executed when a table row is dropped on a non Tabulator DOM element
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
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
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
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.
You can set initial sorters, specifying what sort should be applied when data is first loaded into the table.
Option
Data Type
Default Value
Description
initialSort
array
[]
Array of sorters to be applied on load.
sortOrderReverse
boolean
false
Reverse the order that multiple sorters are applied to the table.
headerSortElement
string
"<div class='tabulator-arrow'></div>"
set the column header sort icon
Filtering
You can set initial filters to be applied to the table.
Option
Data Type
Default Value
Description
initialFilter
array
[]
Array of filters to be applied on load.
initialHeaderFilter
array
[]
Array of initial values for header filters.
headerFilterLiveFilterDelay
integer
300
Number of milliseconds to wait after a keystroke before triggering a header filter.
Row Grouping
Option
Data Type
Default Value
Description
groupBy
string/function/array
false
String/function to select field to group rows by
groupValues
array
false
Array of values for groups
groupHeader
function/array
(see documentation)
function to layout group header row
groupHeaderPrint
function/array
null
Function to alter layout of group header rows when printed
groupHeaderClipboard
function/array
null
Function to alter layout of group header rows when copied to the clipboard
groupHeaderDownload
function/array
null
Function to alter layout of group header rows when downloaded
groupHeaderHtmlOutput
function/array
null
Function to alter layout of group header rows when the getHtml formatter is called
groupStartOpen
boolean/function/array
true
Boolean/function to set the open/closed state of groups when they are first created
groupToggleElement
string/boolean
"arrow"
Set which element triggers a group visibility toggle
groupClosedShowCalcs
boolean
false
show/hide column calculations when group is closed
Pagination
Option
Data Type
Default Value
Description
pagination
string
false
enable pagination
paginationMode
string
"local"
Send pagination config to server instead of processing locally
paginationSize
integer
10
Set the number of rows in each page
paginationSizeSelector
boolean/array
false
Add page size selection select element to the table footer
paginationElement
DOM Node
(generated tabulator footer)
The element to contain the pagination selectors
paginationAddRow
string
"page"
Set where rows should be added to the table
paginationButtonCount
integer
5
set the number of pagination buttons in the footer element
Persistent Configuration
Option
Data Type
Default Value
Description
persistence
boolean/object
false
Define which table data should be persisted
persistenceID
string
null
ID tag used to identify persistent storage information
persistenceMode
boolean/string
true
Store persistence information in a cookie or localStorage
persistenceReaderFunc
function
null
Override persistence reader functionality to read from custom package
persistenceWriterFunc
function
null
Override persistence writer functionality to write to custom package
Clipboard
Option
Data Type
Default Value
Description
clipboard
boolean
false
Enable clipboard module
clipboardCopyRowRange
string/function
"active"
Set which rows are visible in clipboard output
clipboardCopyFormatter
function
false
Format clipboard output before it is inserted in the clipboard
clipboardPasteParser
string/function
false
Clipboard paste parser function
clipboardPasteAction
string/function
false
Clipboard paste action function
Data Tree
Option
Data Type
Default Value
Description
dataTree
boolean
false
Enable tree layout
dataTreeFilter
boolean
true
Enable filtering of child rows
dataTreeSort
boolean
true
Enable sorting of child rows
dataTreeElementColumn
string/boolean
false
Choose which column to display the toggle element in
dataTreeBranchElement
boolean
true
Show tree branch icon
dataTreeChildIndent
integer
9
Tree level indent in pixels
dataTreeChildField
string
"_children"
The data field to look for child rows
dataTreeCollapseElement
boolean/string/DOM Element
false
The element to be used for the collapse toggle button
dataTreeExpandElement
boolean/string/DOM Element
false
The element to be used for the expand toggle button
dataTreeStartExpanded
boolean/array/function
false
The default expansion state for tree nodes
dataTreeSelectPropagate
boolean
false
Allow selection of a row to propagate to its children
dataTreeChildColumnCalcs
boolean
false
Include visible child rows in column calculations
Printing
Option
Data Type
Default Value
Description
printAsHtml
boolean
false
Enable HTML table printing
printStyled
boolean
false
Copy table style to html print table
printRowRange
string
"visible"
set the range of rows to be included in the printed table output
printConfig
object
object
Choose which parts of the table are included in print table
printHeader
boolean/string/DOM Element/function
false
Add header to printed table
printFooter
boolean/string/DOM Element/function
false
Add footer to printed table
printFormatter
function/boolean
false
Alter layout of print elements
Menus
Option
Data Type
Default Value
Description
rowContextMenu
array
false
Add context menu to rows
rowClickMenu
array
false
Add left click menu to rows
groupContextMenu
array
false
Add context menu to group headers
groupClickMenu
array
false
Add left click menu to group headers
Finding Tables
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