Version 6.2 Released!

Click to checkout the new features

Release Notes

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 or or off depending on value.

toggle switches

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 Response 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
Donate