Old Documentation

You are browsing documentation for an old version of Tabulator. Consider upgrading your project to Tabulator 6.3

Release Notes

Columns
Formatters
Events
Internal Events
Bug Fixes

Columns

AutoColumns Full Mode

To optimize the column generation process, Tabulator will by default assume that all rows in the data array contain the same properties, and will therefore only scan the first row in the array to determine the tables columns. This works in most cases, and improves performance by only needing to process one row of data.

However if you are working with rows with variable field setups in each row, this can result in a partially complete table. To avoid this you can enable full parsing mode by setting the autoColumns option to a value of full, this will cause the table to check through all rows in the table when building out its columns

var table = new Tabulator("#example-table", {
    autoColumns:"full",
});

When dealing with rows with variable sets of fields, Tabulator will insert newly discovered columns at the position they are found on the row where they are discovered.

In this mode the columns sorter will also be set when the first undefined value is found in a column, rather than being defaulted to a string sorter if the first row contains undefined data.

Formatters

Toggle Switch

The new toggle formatter displays as a toggle switch that shows itself as either on or off depending on value.

This formatter also uniquely allows for direct user interaction to toggle the value of the cell.

{title:"Example", field:"example", formatter:"toggle", formatterParams:{
    size:40,
    onValue:"on",
    offValue:"off",
    onTruthy:true,
    onColor:"green",
    offColor:"red",
    clickable:true,
}}

The formatter has optional properties for the formatterParams object:

size - siz in pixes for the switch (default 15)
max - minimum value for progress bar (default 100)
onValue - the value of the cell for the switch to be on(default true)
offValue - the value of the cell for the switch to be on(default false)
onTruthy - will show the swtich as on, if the value of the cell is truthy(default false)
onColor - the colour of the switch if it is on
offColor - the colour of the switch if it is off
clickable - enable swtich functionality to toggle the cell value on click

Events

A number of new events have been added in this release

Column Loading Events

Columns Loaded

The columnsLoaded event is triggered when the replacement of the columns is complete. An array of column components is passed as the first argument of the callback.

table.on("columnsLoaded", function(columns){
    //columns - All columns in the table
});

Column Header Click

The headerClick event is triggered when a user left clicks on a column or group header.

table.on("headerClick", function(e, column){
    //e - the click event object
    //column - column component
});

Import Events

Import Choosing File

The importChoose event is triggered the import function is called and the file picker modal opens.

table.on("importChoose", function(){

});

Import Importing File

The importImporting event is triggered after the user has chosen the file to import, but before it has been processed. The file array returned from the file pickers is passed as the first argument of the callback.

table.on("importImporting", function(files){
    //files - the files array returned from the file picker
});

Import Error

The importError event is triggered if there is an error importing the data from the file. The thrown error is passes as the first argument of the callback.

table.on("importError", function(err){
    //err - the import error
});

Imported File

The importImported event is triggered when the data has been successfully parsed from the file, just before it is then loaded into the table. The parsed array of row data objects is passed as the first argument of the callback..

table.on("importImported", function(data){
    //data - array of row data
});

Internal

A number of new internal events have been added in this release

Import Events

Key	Type	Arguments	Notes
import-choose	dispatch		The import file picker has been opened
import-importing	dispatch	files	The user has chosen a file to import
import-error	dispatch	error	The import has failed
import-imported	dispatch	data	The import has succeded