Interface ColumnDefinition

Accessors are used to alter data as it is extracted from the table, through commands, the clipboard, or download.

You can set accessors on a per column basis using the accessor option in the column definition object.

only called when data is being copied into the clipboard.

Additional parameters you can pass to the accessorClipboard.

only called when data is being converted into a downloadable file.

additional parameters you can pass to the accessorDownload.

You can use the accessorHtmlOutput and accessorHtmlOutputParams options on a column definition to alter the value of data in a column before the html is generated.

Each accessor function has its own matching params option, for example accessorDownload has accessorDownloadParams.

You can use the accessorPrint and accessorPrintParams options on a column definition to alter the value of data in a column before it is printed.

additional parameters you can pass to the bottomCalcFormatter function.

Popups work in a similar way to menus, but instead of only displaying lists of menu items they allow you to fill them with any custom content you like, text, input elements, forms, anything you fancy.

If you don't want to show a particular column in the clipboard output you can set the clipboard property in its column definition object to false.

A column can be a "group" of columns (Example: group header column -> Measurements, grouped column -> Length, Width, Height)

You can add a right click context menu to any columns cells by passing an array of menu items to the contextMenu option in that columns definition.

sets css classes on header and cells in this column. (value should be a string containing space separated class names)

show or hide column in downloaded data

There are some circumstances where you may want to block edit-ability of a cell for one reason or another. To meet this need you can use the editable option. This lets you set a callback that is executed before the editor is built, if this callback returns true the editor is added, if it returns false the edit is aborted and the cell remains a non editable cell. The function is passed one parameter, the CellComponent of the cell about to be edited. You can also pass a boolean value instead of a function to this property.

allows the user to edit the header titles

When a user clicks on an editable column the will be able to edit the value for that cell.

By default Tabulator will use an editor that matches the current formatter for that cell. if you wish to specify a specific editor, you can set them per column using the editor option in the column definition. Passing a value of true to this option will result in Tabulator applying the editor that best matches the columns formatter, if present.

You can pass an optional additional parameter with the editor, editorParams that should contain an object with additional information for configuring the editor.

The value to set in the cell after the user has finished editing the cell.

The function to determine if the value is empty.

additional parameters you can pass to the editor.

Set how you would like the data to be formatted.

When copying to the clipboard you may want to apply a different formatter from the one usually used to format the cell, you can do this using the formatterClipboard column definition option. You can use the formatterClipboardParams to pass in any additional params to the formatter.

When the getHtml function is called you may want to apply a different formatter from the one usually used to format the cell, you can do this using the formatterHtmlOutput column definition option.

You can pass an optional additional parameter with the formatter, formatterParams that should contain an object with additional information for configuring the formatter.

When printing you may want to apply a different formatter from the one usually used to format the cell, you can do this using the formatterPrint column definition option. You can use the formatterPrintParams to pass in any additional params to the formatter.

You can freeze the position of columns on the left and right of the table using the frozen property in the column definition array. This will keep the column still when the table is scrolled horizontally.

Callback for when user clicks on the header for this column.

Callback for when user right clicks on the header for this column.

You can add a right click context menu to any column by passing an array of menu items to the headerContextMenu option in that columns definition.

Callback for when user double clicks on the header for this column.

callback for when user double taps on a header for this column, triggered in touch displays when a user taps the same header twice in under 300ms

filtering of columns from elements in the header.

function to check when the header filter is empty

By default Tabulator will try and match the comparison type to the type of element used for the header filter.

Standard input elements will use the "like" filter, this allows for the matches to be displayed as the user types.

For all other element types (select boxes, check boxes, input elements of type number) an "=" filter type is used.

If you want to specify the type of filter used you can pass it to the headerFilterFunc option in the column definition object. This will take any of the standard filters outlined above or a custom function

additional parameters object passed to the headerFilterFunc function.

disable live filtering of the table.

additional parameters you can pass to the header filter.

placeholder text for the header filter.

You can add a menu to any column by passing an array of menu items to the headerMenu option in that columns definition.

The headerMenuIcon option will accept one of three types of value. You can pass in a string for the HTML contents of the button. Or you can pass the DOM node for the button. Though be careful not to pass the same node to multiple columns or you may run into issues. Or you can define a function that is called when the column header is rendered that should return either an HTML string or the contents of the element. This function is passed the column component as its first argument.

By default all columns in a table are sortable by clicking on the column header, if you want to disable this behavior, set the headerSort property to false in the column definition array:

set the starting sort direction when a user first clicks on a header.

allow tristate toggling of column header sort direction.

callback for when user taps on a header for this column, triggered in touch displays.

callback for when user taps and holds on a header for this column, triggered in touch displays when a user taps and holds the same header for 1 second.

sets the on hover tooltip for the column header* * The tooltip headerTooltip can take three different types of value

• boolean - a value of false disables the tooltip, a value of true sets the tooltip of the column header to its title value.
• string - a string that will be displayed for the tooltip.
• function - a callback function that returns the string for the column header*

Change the orientation of the column header to vertical* * The headerVertical property can take one of three values:

• false - vertical columns disabled (default value)
• true - vertical columns enabled
• "flip" - vertical columns enabled, with text direction flipped by 180 degrees*

When the getHtml function is called, hide the column from the output.

If you want to set the horizontal alignment on a column by column basis,

Show/Hide a particular column in the HTML output.

sets the minimum width of this column, this should be set in pixels

Mutators are used to alter data as it is parsed into For example if you wanted to convert a numeric column into a boolean based on its value, before the data is used to build the table.

You can set mutators on a per column basis using the mutator option in the column definition object.

You can pass an optional additional parameter with mutator, mutatorParams that should contain an object with additional information for configuring the mutator.

only called when data is changed via a user editing a cell.

only called when data is loaded via a command {eg. setData).

only called when data is changed via a user editing a cell.

You can pass an optional additional parameter with mutator, mutatorParams that should contain an object with additional information for configuring the mutator.

If you don't want to show a particular column in the print table you can set the print property in its column definition object to false.

set whether column can be resized by user dragging its edges

an integer to determine when the column should be hidden in responsive mode.

sets the column as a row handle, allowing it to be used to drag movable rows.

By default Tabulator will attempt to guess which sorter should be applied to a column based on the data contained in the first row. It can determine sorters for strings, numbers, alphanumeric sequences and booleans, anything else will be treated as a string. To specify a sorter to be used on a column use the sorter property in the columns definition object

You can pass an optional additional property with sorter, sorterParams that should contain an object with additional information for configuring the sorter

If you want to dynamically generate the sorterParams at the time the sort is called you can pass a function into the property that should return the params object.

When copying to clipboard you may want to apply a different column header title from the one usually used in the table. You can now do this using the titleClipboard column definition option, which takes the same inputs as the standard title property.

set custom title for column in download.

formatter function for header title.

additional parameters you can pass to the header title formatter.

When the getHtml function is called you may want to apply a different column header title from the one usually used in the table. You can now do this using the titleHtmlOutput column definition option, which takes the same inputs as the standard title property.

When printing you may want to apply a different column header title from the one usually used in the table. You can now do this using the titlePrint column definition option, which takes the same inputs as the standard title property.

Sets the on hover tooltip for each cell in this column * * The tooltip parameter can take three different types of value:

• boolean - a value of false disables the tooltip, a value of true sets the tooltip of the cell to its value
• string - a string that will be displayed for all cells in the matching column/table.
• function - a callback function that returns the string for the cell Note: setting a tooltip value on a column will override the global setting.

the column calculation to be displayed at the top of this column(see Column Calculations for more details)

Formatter for the topCalc calculation cell.

additional parameters you can pass to the topCalcFormatter function.

additional parameters you can pass to the topCalc calculation function (see Column Calculations for more details)

Validators are used to ensure that any user input into your editable cells matches your requirements.

Validators can be applied by using the validator property in a columns definition object (see Define Columns for more details).

alter the row height to fit the contents of the cell instead of hiding overflow

If you want to set the vertical alignment on a column by column basis

The widthGrow property should be used on columns without a width property set. The value is used to work out what fraction of the available will be allocated to the column. The value should be set to a number greater than 0, by default any columns with no width set have a widthGrow value of 1

The widthShrink property should be used on columns with a width property set. The value is used to work out how to shrink columns with a fixed width when the table is too narrow to fit in all the columns. The value should be set to a number greater than 0, by default columns with a width set have a widthShrink value of 0, meaning they will not be shrunk if the table gets too narrow, and may cause the horizontal scrollbar to appear.