Interface OptionsColumns

If you set the autoColumns option to true, every time data is loaded into the table through the data option or through the setData function, Tabulator will examine the first row of the data and build columns to match that data.

By default column calculations are shown at the top and bottom of the table, unless row grouping is enabled, in which case they are shown at the top and bottom of each group.

The columnCalcs option lets you decided where the calculations should be displayed, it can take one of four values:

true - show calcs at top and bottom of the table, unless grouped, then show in groups (boolean, default) both - show calcs at top and bottom of the table and show in groups table - show calcs at top and bottom of the table only group - show calcs in groups only

multiple or single column sorting

You can use the columnHeaderVertAlign option to set how the text in your column headers should be vertically.

The column definitions are provided to Tabulator in the columns property of the table constructor object and should take the format of an array of objects, with each object representing the configuration of one column.

The headerSort option can now be set in the table options to affect all columns as well as in column definitions.

By setting the headerVisible option to false you can hide the column headers and present the table as a simple list if needed.

By default Tabulator will use the fitData layout mode, which will resize the tables columns to fit the data held in each column, unless you specify a width or minWidth in the column constructor. If the width of all columns exceeds the width of the containing element, a scroll bar will appear.

To keep the layout of the columns consistent, once the column widths have been set on the first data load (either from the data property in the constructor or the setData function) they will not be changed when new data is loaded.

If you would prefer that the column widths adjust to the data each time you load it into the table you can set the layoutColumnsOnNewData property to true.

To allow the user to move columns along the table, set the movableColumns parameter in the options:

If you need to use the . character as part of your field name, you can change the separator to any other character using the nestedFieldSeparator option Set to false to disable nested data parsing

When the resizableColumnFit table definition option is set to true, when you resize a column, its adjacent column is resized in the opposite direction to keep the total width of the columns the same.

Responsive layout will automatically hide/show columns to fit the width of the Tabulator element. This allows for clean rendering of tables on smaller mobile devices, showing important data while avoiding horizontal scroll bars. You can enable responsive layouts using the responsiveLayout option.

There are two responsive layout modes available:

hide - hide columns that no longer fit in the table collapse - collapse columns that no longer fit on the table into a list under the row

Hide Extra Columns By default, columns will be hidden from right to left as the width of the table decreases. You can choose exactly how columns are hidden using the responsive property in the column definition object.

When responsive layout is enabled, all columns are given a default responsive value of 1. The higher you set this value the sooner that column will be hidden as the table width decreases. If two columns have the same responsive value then they are hidden from right to left (as defined in the column definition array, ignoring user moving of the columns). If you set the value to 0 then the column will never be hidden regardless of how narrow the table gets.

If you set the responsiveLayout option to collapse the values from hidden columns will be displayed in a title/value list under the row.

In this mode an object containing the title of each hidden column and its value is generated and then used to generate a list displayed in a div .tabulator-responsive-collapse under the row data.

The inbuilt collapse formatter creates a table to neatly display the hidden columns. If you would like to format the data in your own way you can use the responsiveLayoutCollapseFormatter, it take an object of the column values as an argument and must return the HTML content of the div.

This function should return an empty string if there is no data to display.

Collapsed lists are displayed to the user by default, if you would prefer they start closed so the user can open them you can use the responsiveLayoutCollapseStartOpen option.

By default any formatter set on the column is applied to the value that will appear in the list. while this works for most formatters it can cause issues with the progress formatter which relies on being inside a cell.

If you would like to disable column formatting in the collapsed list, you can use the responsiveLayoutCollapseUseFormatters option:

The default option for triggering a ScrollTo on a visible element can be set using the scrollToColumnIfVisible option. It can take a boolean value:

true - scroll to column, even if it is visible (default) false - scroll to column, unless it is currently visible, then don't move

The default ScrollTo position can be set using the scrollToColumnPosition option. It can take one of three possible values:

left - position column with its left edge at the left of the table (default) center - position column with its left edge in the center of the table right - position column with its right edge at the right of the table