Latest version 6.4

Release Notes

Notes for every release in the 6.x line are collected on this page. Older majors: 5.x, 4.x.

v6.4 — Unit Tests
v6.4 — Styling
v6.4 — Table Height Management
v6.4 — Range Selection
v6.4 — Bug Fixes
Version 6.3 Release Notes
Version 6.2 Release Notes
Version 6.1 Release Notes
Version 6.0 Release Notes

Unit Tests

This release sees the addition of unit tests into the project to aid in improving its stability in future releases.

These can be found in the /test/unit folder of the repo

A full guide on setting up and using these tests will be coming shortly

This release sees an overhaul of the SASS stylesheets, these have been refactored to work with more modern versions of the SASS standard. with work undertaken to improve importing, removing circular dependencies. Update function names, improve variable overriding, and update the build tools to use more up to date libraries.

Bootstrap 5 Dark Mode

Support has been added for the theme-dark class when using the Bootstrap 5 theme

Table Height Management

A number of functions have been added to the table to allow adjustment of table height constraints after initialization.

Changing Table Height

If you want to manually change the height of the table at any time, you can use the setHeight function, which will also redraw the virtual DOM if necessary.

table.setHeight(500); //set table height to 500px

Note: The setHeight function is not available in classic render mode

Changing Table Max Height

If you want to manually change the maximum height of the table at any time, you can use the setMaxHeight function, which will also redraw the virtual DOM if necessary.

table.setMaxHeight(500); //set table max height to 500px

Range Selection

Blur Cell On Navigation

By default Tabulator will trigger the editor on a cell when it gains focus. While this is desirable in a lot of cases, this is not how a lot of spreadsheeting tools operate. if you would prefer to navigate around cells without triggering an edit you can set the selectableRangeBlurEditOnNavigate option to false to disable this behavior.

var table = new Tabulator("#example-table", {
    selectableRangeBlurEditOnNavigate:true, //blur cell on navigation
});

Bug Fixes

v6.4.0 Release

The following minor updates and bugfixes have been made:

Fixed use of deprecated keycode property when assessing keyboard interactions
Fixed issue initializing data trees on existing tables
Cell update events now properly triggered on uninitialized cells
Row height initialization has been optimized when using the virtual renderer
Prevented the edit and range modules from both trying to control cell navigation at the same time
Fixed issues with AIRA identification of table body
Upgraded dependencies to allow building with more recent versions of Node.js
Fixed row rendering issue when a table is removed and added to page in quick succession
Fixed issue with reactive data when rewatching existing data
Fixed issue with recursive rendering with certain sizes of table
DataTree rendering no longer causes a maximum call stack size warning
General tidyup to remove unneeded imports from the codebase
Improved range selection speed on large data sets
Fixed issue with movement of caret while editing and using range selection
The tabulator-layout attribute is now correctly removed from the table DOM element when the table is destroyed

Version 6.3 Release Notes

Dependency Management

This release sees a significant update to how dependencies are managed by the table, with the introduction of the new Dependency Registry, Tabulator will now allow you to register dependant libraries directly with your table, allowing you more control over package importing.

The core of Tabulator, and the vast majority of its functionality has zero depencncies, and this has not changed, and will NEVER change. This means you can set up the vast majority of tables without needing to include any other libraries in your project.

But there are a few occasions where a feature of the table may be reliant on an external dependency. In the past Tabulator required you to set these up on the global variables that the libraries usually require. This option is still available, and existing Table setups will continue to function un interrupted.

Script Tags

You can continue to import your dependency via script tags that will set it up as a global property on the window object. Tabulator knows where to find these and can load them in without any additional setup

<script type="text/javascript" src="https://my-dependency.com/dependency.js"></script>

Just make sure to include this script tag before you instantiate your Tabulator instance. Otherwise the functionality from the dependency will not be there when the table loads.

Setup Option

But you now also have the option to import the library into your project via an import or require statement.

import {MyDependency} from dependency

And then register the library with Tabulator with the dependencies object in the table setup options:

var table = new Tabulator("#example-table", {
    dependencies:{
        "ThatDependency":MyDependency,
    },  
});

This allows much greater flexibility and control over how dependencies are handled in your projects.

The key used to reigster the dependency will depend on the library used. In most cases it should be the varaible name used by the library when it is set on the window object. This is covered in more detail on a case by case basis for each dependency below.

Sheet JS

The SheetJS Library is required to export and import Excel spreadsheets from the table. It can be registered with Tabulator in one of two ways

Script Tags

You can import the library via script tags that will set it up as a global property on the window object. Tabulator knows where to find these and can load them in without any additional setup

<script type="text/javascript" src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"></script>

Just make sure to include this script tag before you instantiate your Tabulator instance. Otherwise the functionality from the dependency will not be there when the table loads.

Setup Option

You can also choose to add the library to your project from npm and then import the library into your code via an import statement.

import * as XLSX from 'xlsx';

And then register the library with Tabulator with the dependencies object in the table setup options, this must be done against the XLSX key:

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

JS PDF

The jsPDF Library is required to export PDF documents from the table. It can be registered with Tabulator in one of two ways. When using this library you will also need to include the jsPDF-AutoTable Plugin as this adds the functionality needed to jsPDF to easily tender tables.

Script Tags

You can import the library via script tags that will set it up as a global property on the window object. Tabulator knows where to find these and can load them in without any additional setup

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.20/jspdf.plugin.autotable.min.js"></script>

Just make sure to include these script tags before you instantiate your Tabulator instance. Otherwise the functionality from the dependency will not be there when the table loads.

Setup Option

You can also choose to add the library to your project from npm and then import the library into your code via an import statment. You will then need to apply the plugin to jsPDF before you register it with the table

import jsPDF from 'jspdf'
import { applyPlugin } from 'jspdf-autotable'
applyPlugin(jsPDF)

You should then register the library with Tabulator with the dependencies object in the table setup options, this must be done against the jspdf key:

var table = new Tabulator("#example-table", {
    dependencies:{
        jspdf:jsPDF,
    },  
});

Luxon

The luxon.js is required to manipulate dates and times, the library is used in several formatters, sorters and editors. It can be registered with Tabulator in one of two ways

Script Tags

You can import the library via script tags that will set it up as a global property on the window object. Tabulator knows where to find these and can load them in without any additional setup

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/build/global/luxon.min.js"></script>

Just make sure to include this script tag before you instantiate your Tabulator instance. Otherwise the functionality from the dependency will not be there when the table loads.

Setup Option

You can also choose to add the library to your project from npm and then import the library into your code via an import statement.

import { DateTime } from "luxon";

And then register the library with Tabulator with the dependencies object in the table setup options, this must be done against the DateTime key:

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

Importing

Header Transforms

When importing data from a file, it can some times be useful to be able to transform the incomming column header names.

This can be done using the importHeaderTransform option, this fuction is called on each column header value from the incomming file and can be used to transform these values.

This option takes a function with two arguments. The first argument is the value of the column header, the second argument is an array of all column header values. The function must return the new header value.

In the example below we will use the importHeaderTransform option to trim the incomming column header values to remove all unessisary spaces, and covert them all to lowercase:

//define some array data
//define table
var table = new Tabulator("#example-table", {
    importHeaderTransform:function(header, headers){
        //header - the value of the header to be transformed
        //headers - an array of all header values

        return header.trim().toLowerCase(); //removed unneeded space from header text and conver to lower case
    },   
});

Value Transforms

When importing data from a file, it can some times be useful to be able to transform the incomming cell values.

This can be done using the importValueTransform option, this fuction is called on cell value from the incomming file. This transform occurs befor mutators are triggered and can be used to perform general transofrmations on the whole dataset, such as handling nulll values or JSON decoding

This option takes a function with two arguments. The first argument is the value of the cell, the second argument is an array of all values in the row. The function must return the new cell value.

In the example below we will use the importValueTransform option to JSON decode cell values:

//define some array data
//define table
var table = new Tabulator("#example-table", {
    importValueTransform:function(value, rowData){
        //value - the cell value to be transformed
        //rowData - an array of all values in the row

        return JSON.parse(value); //JSON decode the cells value
    },   
});

Validate Import

Validate File

There are times where you may want to validate a file before importing it into the table, such as checking its size. The importFileValidator option allows you to check the parsed file contents before it is loaded into the table.

The importFileValidator takes a callback with one argument, the file about to be imported. The function should return a value of true if the data is valid, any other value will be considered a validation failure and will cause the import to be aborded and an importError event to be fired, with the response from the validator passed to the event

//define table
var table = new Tabulator("#example-table", {
    importFileValidator:function(data){
         return file.size > 500000 ? "File Too Big" : true; //abort the import if the file is bigger that 500kb
    },  
});

// Trigger an alert with the error message if the import fails
table.on("importError", function(err) {
    alert(err);
})

Validate Data

There are times where you may want to validate the data from a file before importing it into the table. The importDataValidator option allows you to check the parsed data before it is loaded into the table.

The importDataValidator takes a callback with one argument, an array of row data objects from the data parsed from the file. The function should return a value of true if the data is valid, any other value will be considered a validation failure and will cause the import to be aborded and an importError event to be fired, with the response from the validator passed to the event

//define table
var table = new Tabulator("#example-table", {
    importDataValidator:function(data){
        return data.length > 5000 ? "Too Much Data" : true; //abort the import if there are more than 5000 rows
    },  
});

// Trigger an alert with the error message if the import fails
table.on("importError", function(err) {
    alert(err);
})

Editing

Adaptable Editor

The adaptable editor is a bit of a special case, instead of creating an editor itself, it lets you pick between any existing editor based on the value of the cell. This is particularly useful when a column might have varying types of data that you may need each cell to be editied differently.

{title:"Example", field:"example", editor:"adaptable"}

By default the adaptable editor will attempt to pick an editor based on the cells value:

Number - If the value is a number type, the number editor will be used
Boolean - If the value is a boolean type, the tickCross editor will be used
Text - If the value is a string with a carriage return in it, the textarea editor will be used
Input - for all other values, the input editor will be used

Note This editor should not be used as a header filter, as header filters have no initial value, it will always default to an input editor if used in this way.

Customise Editor Lookup

You can customise which editors are chosen using the editorLookup option on the editorParams object. This option takes a function with one argument, the CellComponent for the cell being edited. The function should return the choice of editor, this can be any value that can be passed to the normal editor option

{title:"Example", field:"example", editor:"adaptable", editorParams:{
    editorLookup:function(cell){
        //cell - the Cell Component for the cell being edited
        
        var value = cell.getValue();
        
        return Array.isArray(value) ? "list" : "input"; // if the cell contains an array, use the list editor, otherwise use the input editor;
    }
}}

Params Lookup

You can also customise the params that are passed into the chosen editor by using the paramsLookup option on the editorParams object. You should pass an object into this option, with a key for each type of editor that can be looked up, and a value of ts params object:

{title:"Example", field:"example", editor:"adaptable", editorParams:{
    paramsLookup:{
        "input":{
            mask:"AAA-999",
        },
        "number":{
            min:0,
            max:100,
            step:10
        }
    }
}}

Alternatively, if you need more control of the params generated for the editor, you can pass a function into the paramsLookup option. This function takes two arguments, the first ist the editor that has been chosen, the second is the CellComponent for the cell being edited. The function should return the params object for that editor:

{title:"Example", field:"example", editor:"adaptable", editorParams:{
    paramsLookup:(lookup, cell) => {
        return {
            max: cell.getColumn().getField() === "age" ? 100 : 999, //set the max value on the age number editor to 100 and let all other columns use 999
        };
    }
}}

List Editor Values Lookup

The list editor has been updated so when the valuesLookup param has a value of true and the multiselect param is enabled, the value list will now extract the values containined in the cell value arrays rather than the arrays themselves

So when a column is setup to use valuesLookup and multiselect:

{title:"Example", field:"example", editor:"list", editorParams:{
    valuesLookup: true,
    multiselect: true,
}}

Row data with cells that contain arrays of values:

[
    {example:["red", "green"]},
    {example:["green", "blue"]},
    {example:["red", "blue"]},
]

Will now be correctly interpreted as containing multiple values and the values list will be built as a list of unique values from all of these arrays. In this case it will have three items, "red", "green" and "blue".

Formatting

Array Formatter

The array formatter joins arrays of values into a string seperated by a delimiter character ("," by default)

{title:"Example", field:"example", formatter:"array", formatterParams:{
    delimiter: "|", //join values using the "|" delimiter
    valueMap: "age", //show the age property of the objects
}}

The formatter has optional properties for the formatterParams object:

delimiter - the character used to join the array values togeather (default "|")
valueMap - used when the array contains objects with nested properties to choose a property to display

Value Maps

Sometimes the array could be storing a series of objects with nested properties. you can use the valueMap param to choose which property should be displayed for each item in the array

In this example lets assume we have a cell that for each row contains array of people objects with the following values:

[
    {
       id:12345,
        details:{
            name:"bob",
            age:32,
            height:45,
        }
    },
    {
        id:25142,
        details:{
            name:"jim",
            age:52,
            height:145,
        }
    }
]

And lets say we wanted to show the name of each person in that array, We could use tha valueMap to choose the property we wanted to display. In this case we can pass a string in to select the nested property we are looking for using standard dot notation. this will use the tables nestedFieldSeparator option for whatever your default separator is.

{title:"Example", field:"example", formatter:"array", formatterParams:{
    delimiter: "|", //join values using the "|" delimiter
    valueMap:"details.name", //show the name of each item in the array
}}

You can also choose to pass a callback function into the valueMap param. This callback should be compatible with the standard js array map function. it should have one argument, the incoming array item to be mapped, and should return the mapped value for that item.

{title:"Example", field:"example", formatter:"array", formatterParams:{
    valueMap:function(item){
        return item.details.name; //show the name property in the details object on each item in the array
    }), 
}}

JSON

The json formatter uses the JSON.stringify function to pretty print objects and arrays

{title:"Example", field:"example", variableHeight:true, formatter:"json", formatterParams:{
    multiline: false, //show output on only one line
    indent: " ", //indent object properties with a single spave
    replacer: ["cheese"] //show only the "cheese" property from the cell value object
}}

The formatter has optional properties for the formatterParams object:

multiline - pretty print the output on multiple lines (default true)
indent - the indent character used for object properties (default "\t")
replacer - the replacer argument for the JSON.stringify function. Checkout the MDN Docs for full details

Note - When using this formatter in multiline mode, you should also set the variableHeight option on the column definition to true, this will ensure the row height is recalculated if the resizing of the column causes text to wrap

Adaptable Formatter

The adaptable formatter is a bit of a special case, instead of creating a formatter itself, it lets you pick between any existing formatter based on the value of the cell. This is particularly useful when a column might have varying types of data that you may need each cell to be formatted differently.

{title:"Example", field:"example", formatter:"adaptable"}

By default the adaptable formatter will attempt to pick a formatter based on the cells value:

Boolean - If the value is a boolean type, the tickCross formatter will be used
Text - If the value is a string with a carriage return in it, the textarea formatter will be used
Plain Text - for all other values, the plaintext formatter will be used

Customise Formatter Lookup

You can customise which formatters are chosen using the formatterLookup option on the formatterParams object. This option takes a function with one argument, the CellComponent for the cell being edited. The function should return the choice of formatter, this can be any value that can be passed to the normal formatter option

{title:"Example", field:"example", formatter:"adaptable", formatterParams:{
    formatterLookup:function(cell){
        //cell - the Cell Component for the cell being formatted
        
        var value = cell.getValue();
        
        return typeof === "boolean" ? "tickCross" : "plaintext"; // if the cell contains a boolean user the tickCross formatter, otherwise use the plaintext formatter;
    }
}}

Params Lookup

You can also customise the params that are passed into the chosen formatter by using the paramsLookup option on the formatterParams object. You should pass an object into this option, with a key for each type of formatter that can be looked up, and a value of ts params object:

{title:"Example", field:"example", formatter:"adaptable", formatterParams:{
    paramsLookup:{
        "tickCross":{
            tickElement:"YES!",
        }
    }
}}

Alternatively, if you need more control of the params generated for the formatter, you can pass a function into the paramsLookup option. This function takes two arguments, the first ist the formatter that has been chosen, the second is the CellComponent for the cell being edited. The function should return the params object for that formatter:

{title:"Example", field:"example", formatter:"adaptable", formatterParams:{
    paramsLookup:(lookup, cell) => {
        return {
            tickCross: cell.getColumn().getField() === "sad" ? ":(" : ":)", //set the tick value to :( if the field is sad, otherwise set it to :)
        };
    }
}}

Sorting

Array Sorter

The array has been updated to add a couple of new features

The new string sort type, allows the sorter to join an array of strings togeather in an array and then perform a string comparison with the next row.

This would help in scenarios where a cell's value is an array of strings, such as:

["Steve", "Bob", "Jim"]

This could then be sorted with the following sorter setup

{title:"Example", field:"example", sorter:"array", sorterParams:{
    type:"string",
}}

Value Maps

The new valueMap param can be used in the instance where an array could be storing a series of objects with nested properties. It is used to choose which property should be used for each item in the array to perform the sort

In this example lets assume we have a column that for each cell contains array of people objects with the following values:

[
    {
        name:"bob",
        details:{
            age:32,
            height:45,
        }
    },
    {
        name:"jim",
        details:{
            age:52,
            height:145,
        }
    }
]

And lets say we wanted to sort the column by the max age of any person in that array, We could use tha valueMap to choose the property that the array sorter sorts by. In this case we can pass a string in to select the nested property we are looking for using standard dot notation. this will use the tables nestedFieldSeparator option for whatever your default separator is.

{title:"Example", field:"example", sorter:"array", sorterParams:{
    type:"max", //sort by they highest value from each item in the array
    valueMap:"details.age", //sort by the age property in the details object on each item in the array
}}

{title:"Example", field:"example", sorter:"array", sorterParams:{
    type:"max", //sort by they highest value from each item in the array
    valueMap:function(item){
        return item.details.age;
    }), //sort by the age property in the details object on each item in the array
}}

Mutate

Import Mutators

You can use the mutatorImport and mutatorImportParams options on a column definition to alter the value of data in a column as it is imported into the table.

The example below will transform all ages into a boolean, showing if they are over 18 or not. The mutatorImportParams is used to pass the age limit to the mutator so the same mutator function can be used on multiple columns with different age limits:

var ageMutator = function(value, data, type, params, column){
    return value >= params.legalAge;
}

{title:"Under Age", field:"age", mutatorImport:ageMutator, mutatorImportParams:{legalAge:18} }

Note: The mutatorImport only works if you have columns defined on your table, if you are using the autocolumns option then the columns do not exist when the data is imported, for this scenario look at using the importTransform option inestead

Pagination

Page Out of Range Behaviour

When loading paginated data, if the current page shown is larger thant the max page, Tabulator will just continue to show the data presented to it, to minimize the disruption to the user.

If you would prefer to force the behaviour in this instance, you can use the "paginationOutOfRange" option.

var table = new Tabulator("#example-table", {
    pagination:true, //enable pagination
    paginationOutOfRange:"last", //show the last page if pagination is out of range
});

The paginationOutOfRange option takes any of the standard setPage values, this can either be an integer representing the page or there are also four strings that you can pass into the parameter for special functions.

"first" - show the first page
"prev" - show the previous page
"next" - show the next page
"last" - show the last page

You can alternatively pass a callback to this function to decide what to do in this scenario, the callback should take two arguments, the first is the current page number, the second is the maximum page number. It should return the page that should be loaded, this can either be am integer or one of the strings outlined above

var table = new Tabulator("#example-table", {
    pagination:true, //enable pagination
    paginationOutOfRange:function(currentPage, maxPage){
        //currentPage - the current page number
        //maxPage - the maximum page number

        return currentPage > 10 ? "first" : "last";
    }
});

Range Selection

Range Auto Focus

By default, when you select a range that consists of one cell, it will automatically gain focus. There are some scenarios in which this is undesirable. The autofocus functionality can be disabled using the selectableRangeAutoFocus option:

var table = new Tabulator("#example-table", {
  selectableRangeAutoFocus:false, //disable auto focus on cell during range selection
});

Bug Fixes

v6.3.0 Release

The following minor updates and bugfixes have been made:

The loading alert is now correctly shown when importing data into the table
Cells using the textarea formatter will no longer render excessivly tall
Scrolling to focused cell now works correctly when spreadsheet mode has been enabled
Fixed issue with spreadsheet ranges being corruped after arrow key press

v6.3.1 Release

The following minor updates and bugfixes have been made:

Fixed an exception when a column using the virtual horizontal renderer contained only frozen columns
Nested tables no longer cause a memory leak when data is replaced using the setData function
Column width changes triggered by a user double clicking on the column resize handle are now persistent when the table is redrawn due to resize or visibility change
The order of interaction event dispatches has been corrected so the cell event is fired before the row event

Version 6.2 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 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

Column Move Events

Key	Type	Arguments	Response	Notes
column-moving	dispatch	event, column		Column has started to be moved

Bug Fixes

v6.2.1 Release

The following minor updates and bugfixes have been made:

Range selection with column moving now works correctly
Focus is now correctly restored after range selection
Range selection will no longer accidentally select the row header when using keyboard navigation
The getCells function on the range component now correctly returns cell components
Improved cell range jump navigation in large data sets
Navigation focus maintained when scrolling
Fixed node version issue in linter config
Fixed issue with popup lists not fitting on screen

v6.2.2 Release

The following minor updates and bugfixes have been made:

Updated bundler and package.json to improve esm import compatibility
Fixed alignment issues when browser is zoomed into table

v6.2.3 Release

The following minor updates and bugfixes have been made:

Fix regression in package.json in previous release

v6.2.4 Release

The following minor updates and bugfixes have been made:

Add all dist files to package.json export

v6.2.5 Release

The following minor updates and bugfixes have been made:

Add all src files to package.json export

Version 6.1 Release Notes

File Imports

The importer module has seen a couple of updates in this release.

File Reader Format

An optional third argument can now be passed to the import function. This is used to tell Tabulator how to read the file if it is not plain text, a good example of this would be when using the xlsx importer, as this needs to read in data as an array buffer.

table.import("xlsx", ".xlsx", "buffer");

This can be any of the standard import file readers.

Excel Importer

The XLSX importer requires that the SheetJS Library be included on your site, this can be included with the following script tag.

<script type="text/javascript" src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"></script>

The new xlsx importer will load a Excel and other spreadsheet formatted files into the table.

Multi-Tab Spreadsheets
If you are using a multi-sheet spreadsheet then it will always be the first sheet that is imported

Column Headers
Tabulator will treat the first row of the spreadsheet as the column headers

Array Buffer Reader

Unline other importers this importers requires you to use the third argument of the import function to specify that the data be loaded in buffer format:

table.import("xlsx", ".xlsx", "buffer");

Because this importer uses SheetJS to decode the file, it is also possible for it to handle a wide range of standard spreadsheet formats alongside just the xlsx file extension:

table.import("xlsx", [".xlsx", ".csv", ".ods"], "buffer");

Themes

Dark Mode Site Theme

A new Site Dark CSS theme has been added to the library. This new theme matches the style of the tables on this website.

To use this new theme, you would need to import the following css file into your project:

<link href="/dist/css/tabulator_site_dark.min.css" rel="stylesheet">

Version 6.0 Release Notes

Easy Upgrade

This release sees many new features added to Tabulator, along with a few tweaks to system architecture. Unlike previous major releases there is not a big upgrade process to move to 6.0

In fact, for most developers you will be able to seamlessly upgrade from 5.6 to 6.0 without making any changes. If you build your own custom variations of Tabulator or make your own modules, then have a look below at the Module and Build Tools sections for changes that affect your code.

A full breakdown of key upgrade steps can be found in the Upgrade Guide

Looking to the Future

A lot the work in this release has gone into making changes behind the scenes in how some of Tabulators key features work togeather to make things like ESM Tree Shaking work correctly, and to lay the ground work for some future features that will be comming in the next few releases.

Deprecated Code

All 5.x deprecated code has been removed from the codebase. The updated functionality for each of the deprecated options can be found in the upgrade documentation for the relevant release.

ESM Tree Shaking

The ESM module structure has been tweaked to fix issues preventing tree shaking from working properly. This should result in a significant reduction in library size for most usage cases.

The full minified version of Tabulator is about 420kb in size, which is rather big. But in most cases you only need a small subset of the functionality that Tabulator can provide.

By importing only the Tabulator core (which is only 120kb in size), and only the modules you actually use, the library can have a much smaller footprint in your code.

To start your project you should import the Tabulator class, along with any modules that you may need to add features to your table.

You then register those modules with the Tabulator class, using the registerModule function before you instantiate your first table. This function takes one argument of either a module class or an array of module classes. If needed you can call this function multiple times.

import {Tabulator, FormatModule, EditModule} from 'tabulator-tables';
    
    Tabulator.registerModule([FormatModule, EditModule]);
    
    var table = new Tabulator("#example-table", {
        //table setup options
    });

Build Tools

Dependencies

All the dev dependencies used to package the library have been upgraded to their latest version in this release.

This will likely have no affect on the vast majority of Tabulator users. But if you do build custom versions of Tabulator yourself, or submit Pull Requests to the library then please take note of the following.

This release sees Tabulator upgrade to using Rollup v4 for its package bundling, this now means that in order to build your own version of Tabulator, you will need to be running node v18 or higher.

Build Files

In additon to this, several of the build files have now been renamed to match the requirements of Rollup 4, this should have little impact unless you have implemented custom build steps.

NPM Commands

All of the existing npm run commands still work as they did before.

Modules

Custom modules have been given a couple of upgrades as part of this release

Static Properties

Several of the existing setup options for custom modules have been moved to static properties inside the module class definitions

Module Names

The name of a module should now be set using the static moduleName property in the object class definition instead of on the prototype

class CustomModule extends Module{
    static moduleName = "custom"; //module name
}

Module Initialization Order

The name optional initialization order for a module now be set using the static moduleInitOrder property in the object class definition instead of on the prototype

class CustomModule extends Module{
    static moduleInitOrder = 10; //when to initialize the module compared to other modules
}

Extending Other Modules

The module structure now provides a way for you to extend the default settings of other modules if you need to enhance their functionality to fit with your custom module. For example if your new module required a new formatter to be made available in the format module for instance.

This helps keep all new functionality related to a module contained in that module, making the codebase easier to maintain.

This works in a similar way to the Extending Module functionality that is available outside of a module, and is available to alter all the same settings outlined in the documentation for that functionality.

Inside a module this is done using the optional static moduleExtensions property.

In this example we are extending the format module, and adding bold and uppercase formatters to the formatters property:

class CustomModule extends Module{
    
    static moduleName = "custom"; //module name
    static moduleExtensions = {
        format:{ //module you want to extend
            formatters:{ //property you want to extend
                bold:function(cell, formatterParams){ //new bold property
                    return "" + cell.getValue() + ""; //make the contents of the cell bold
                },
                uppercase:function(cell, formatterParams){ //new uppercase property
                    return cell.getValue().toUpperCase(); //make the contents of the cell uppercase
                }
            }
        }
    }
    
    constructor(table){
        ...
    }
}

The moduleExtensions option takes an object as its value. The properties of that object should be the names of any modules you want to extend. In the example above this is the format property. Each of these properties should have an object assigned to them.

Each of those objects should have properties for each of the modules properties that you want to extend which in-turn also contain an object. In the example above this is the formatters property.

Each of those objects should have properties for the elements you want to add to that property. In the example above this is the bold and uppercase properties.

Static Extension
Because modules can only be extended before the table has been instatiated, these extensions must be defined statically and cannot be altered based on table configuration. Attempting to alter these after a table has been instantiated may result in unpredictable behaviour.

Missing Modules
Exenstions will only be applied to modules that have been registered with your Tabulator class. If extensions have been added for a module that has not been registered, they will be safely ignored. For example, in this case if the table did not have a format module, these extensions would be ignored

Row Headers

Sometimes it can be useful to add a visual header to the start of a row. The new rowHeader option allows you to define a column definition for a styalized header column at the start of the row.

This can be great for adding row number, movable row handles or row selections, and keeps the controls visually separated from the table data.

var table = new Tabulator("#example-table", {
    rowHeader:{formatter:"rownum", headerSort:false, hozAlign:"center", resizable:false, frozen:true},
});

You can alternativley pass a value of true to the rowHeader option to add a small empty row header

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

Module Examples
Checkout the movable rows, row selection and responsive collapse demos to see the new row header functionality in use.

Module Integrations
A number of existing modules have been reworked to make use of this new functionality, checkout the rest of the release notes to see which modules can now incorporate the row header

Spreadsheet Module

This release sees the introduction of the new spreadsheet module, which can generate a blank empty spreadsheet with standard alphabetical columns and numeric rows, and then load an array of data into that table.

The purpose of the spreadsheet module is to layout columns and rows, handle multiple sheets of data, map data into the table and extract it in array format. The real power of this module is realised when it is combined with many other table modules like range selection, editing and clipboard to give a comprehensive spreadsheet experience.

Formulas
The spreadsheet module does not currently support cell based formulas, but this will be comming in a future release.

Data Format

The spreadsheet module works differently than other modules, and is designed to handle spreadsheet data as an array of row arrays rather than objects. This essentially replicates the grid format of a spreadsheet:

[
    [9937,	"",	"",	7749,	9816,	4355,	8279,	"",	""],
    [2380,	"",	6977,	8896,	4012,	3803,	5408,	3415,	3056],
    [9180,	"",	39,	9445,	3917,	"",	18,	5239,	2516],
    [1924,	8734,	1819,	1838,	2330,	7921,	9219,	"",	3537],
    ["",	8665,	5875,	9732,	1926,	"",	9743,	8388,   ""],
    [7040,	4861,	2988,	5584,	2344,	9749,	8872,	9177,	6246],
    [6334,	1674,	2967,	"",	9353,	396,	6006,	8572 , ""],
    [6359,	"",	2580,	5723,	9801,	554,	1044,	5266,	8532],
    [7278,	6971,	2232,	5720,	5665,	7231,	1165,	"",	168],
  ]

Because it is designed to handle array formatted data across multiple sheets it has its own properties and functions for loading and retreiving data from the table.

Compatability

Because the spreadsheet module lays out data in a very rigid spreadsheet format, it is not compatible with ant modules that add other custom elements into rows or columns, such as pagination, grouping, responsive collaspe, column calculations etc.

Simple Spreadsheet

If you only want to display a single sheet of data, then there is are a series of quick options you can setup to get you spreadsheet up and running.

You can enable spreadsheet mode by setting the spreadsheet option to true:

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

Sheet Size

You can define dimensions of your sheet using a couple of options, Tabulator will then generate the needed empty columns and rows for your spreadsheet.

It is worth noting that if you load in data with more rows or columns than your current sheet, the sheet will be expanded to fit the data, you can never have a sheet smaller than the data it contains

You can define the numbr of columns you want in your spreadsheet using the spreadsheetColumns option. This option has a default value of 50 if not set.

var table = new Tabulator("#example-table", {
  spreadsheet:true,
  spreadsheetColumns:100, //create spreadsheet with 100 columns
});

You can define the numbr of rows you want in your spreadsheet using the spreadsheetRows option. This option has a default value of 50 if not set.

var table = new Tabulator("#example-table", {
  spreadsheet:true,
  spreadsheetRows:100, //create spreadsheet with 100 rows
});

Loading Data

You can load array formatted data into your spreadsheet in one of two ways.

You can either load it at the point the table is loaded using the spreadsheetData option:

var table = new Tabulator("#example-table", {
  spreadsheet:true,
  spreadsheetData:[
    [9937,	"",	"",	7749,	9816,	4355,	8279,	"",	""],
    [2380,	"",	6977,	8896,	4012,	3803,	5408,	3415,	3056],
    [9180,	"",	39,	9445,	3917,	"",	18,	5239,	2516],
    [1924,	8734,	1819,	1838,	2330,	7921,	9219,	"",	3537],
    ["",	8665,	5875,	9732,	1926,	"",	9743,	8388,   ""],
  ]
});

Or you can load it at any point after the table is built, using the setSheetData function, passing the array as the first argument in the function:

var data = [
    [9937,	"",	"",	7749,	9816,	4355,	8279,	"",	""],
    [2380,	"",	6977,	8896,	4012,	3803,	5408,	3415,	3056],
    [9180,	"",	39,	9445,	3917,	"",	18,	5239,	2516],
    [1924,	8734,	1819,	1838,	2330,	7921,	9219,	"",	3537],
    ["",	8665,	5875,	9732,	1926,	"",	9743,	8388,   ""],
];

table.setSheetData(data);

Spreadsheet Data Loading
It is very important to note that when using the spreadsheet module, you must only use the spreadsheet functions and options for loading data into the table, this is because the module maps that data into a format that Tabulator can understand. If you use any of the standard data options or and data manipulation functions like setData, it will result in the table malfunctioning.

Cell Setup

All cells in the spreadsheet will be setup with the same column definition, you can customize this using any of the standard column definition options by passing a object to the spreadsheetColumnDefinition option.

For exammple if you wanted to add an input editor to all cells then you could the following:

var table = new Tabulator("#example-table", {
  spreadsheet:true,
  spreadsheetColumnDefinition:{editor:"input"}, //add an input editor to every cell
});

Row Header

A good way to improve the functionality of the spreadsheet is to use the tables built in row header functionality to add a row header to each row with that rows number displayed.

The spreadsheet module injects the index for each row onto its _id property, so if you set that as the field of the header row then each row will show its assigned row number:

var table = new Tabulator("#example-table", {
  spreadsheet:true,
  rowHeader:{field:"_id", hozAlign:"center", headerSort:false},
});

Exporting Data

You can extract data from your sheet at any point by calling the getSheetData function. This will return an array of sheet data in the same format as outlined above

var data = table.setSheetData(data);

It is worth noting that by default the spreadsheet will only export the rows and columns of a spreadheet that actually contain data (ie. it ignores a column or row if all of it cells have a value of undefined).

For example if you had a table with 50 columns and only the first 10 contained data, only the first 10 would be exported. This prevents large numbers of empty rows and columns from clogging up a data set.

Only empty rows and columns after the data are ignored, empty cells before the data (ie above and to the left of data) are included so that the data does not change its index in the table

If you would like to export the entirety of a dataset including empty columns and rows, you can do this using the spreadsheetOutputFull option.

var table = new Tabulator("#example-table", {
  spreadsheet:true,
  spreadsheetOutputFull: true, //export all data including empty columns
});

Multiple Sheets

If you are looking to include multiple sheets in your table then Tabulator has a range of options to setup the table and make it easier for your users to interact with data across multiple sheets

Sheet Definitions

If you want to load multiple sheets of data into yout table then you can pass an array of sheet definition objects to the spreadsheetSheets option. A sheet definition object contains the the data for the sheets as well as meta data about the sheet such a its size and title.

var table = new Tabulator("#example-table", {
    spreadsheet:true,
    spreadsheetSheets:[
        {
            title:"Sales Info",
            key:"info",
            columns:20,
            rows:20,
            data:[
                [9937,	"",	"",	7749,	9816,	4355,	8279,	"",	""],
                [2380,	"",	6977,	8896,	4012,	3803,	5408,	3415,	3056],
                [9180,	"",	39,	9445,	3917,	"",	18,	5239,	2516],
            ]
        },
        {
            title:"Profitablility",
            key:"profit",
            data:[
                [2380,	"",	6977,	8896,	4012,	3803,	5408,	3415,	3056],
                [9180,	"",	39,	9445,	3917,	"",	18,	5239,	2516],
                [1924,	8734,	1819,	1838,	2330,	7921,	9219,	"",	3537],
            ]
        },
    ]
});

The following options can be set on a sheets definition object:

title - The title displayed in the sheets tab
key - The key used to reference the sheet when calling functions (if this is not defined it will default to the title)
columns - the number of columns in the sheet (if not defined it will default to the spreadsheetColumns option)
rows - the number of rows in the sheet (if not defined it will default to the spreadsheetRows option)
data - the data array for the sheet

You can either use the spreadsheetSheets to load multiple sheets or the spreadsheetData to load a single sheet. Yu cannot use both at the same time

Tabs

By default Tabulator will load in multiple sheets and show the contents of the first sheet, you can then programatically choose when to show other sheets to the user.

If you would prefer the user to be able to navigate through the sheets themelves via some tabs in the footer, enable the spreadsheetSheetTabs option:

var table = new Tabulator("#example-table", {
  spreadsheet:true,
  spreadsheetSheetTabs:true, //show spreadsheet tabs in footer
});

Ajax Loading

This functionality is provided by the ajax module

In addition to the spreadsheetData and spreadsheetSheets options for loading your spreadsheets from local data, you can also make use of the ajax module to request your spreadsheet data from a remote source.

Set the standard ajaxURL option to the source URL for your spreadsheet data. This enpoint should either return an array of sheet data or an array of structure definition objects as outline above. The spreadsheet module can detect which format it is and will load the data appropriately.

var table = new Tabulator("#example-table", {
    spreadsheet:true,
    ajaxURL:"http://www.mysite.com/sheets", //url endpoint for sheet data
});

You can also use all other standard ajax options for configuring your request, checkout the Ajax Documentation for full details

Sheet Management

The spreadsheet module provieds a wide range of functions for interacting with sheets. Most of these functions can either be called on both the table or on a matching function on a specific Sheet Component

Sheet Lookups

A lot of the management functions have a first argument that is the sheet lookup define which sheet the action should be carried out on. This can take one of three values:

undefined - if you leave the field empty it will default to the currently active sheet
sheeet component - you can pass in the sheet component for a sheet you want to action
key - pass in the string for the key of the sheet you want to action

For eaxample the function below will clear the data for the sheet with a key of "info":

table.clearSheet("info"); // clear info tab data

Set Sheets

You can replace all sheets in the table using the setSheets function. This function takes an array of sheet definitions as its first argument.

var sheetDefs = [
    {
        title:"Sales Info",
        key:"info",
        columns:20,
        rows:20,
        data:[
            [9937,	"",	"",	7749,	9816,	4355,	8279,	"",	""],
            [2380,	"",	6977,	8896,	4012,	3803,	5408,	3415,	3056],
            [9180,	"",	39,	9445,	3917,	"",	18,	5239,	2516],
        ]
    },
    {
        title:"Profitablility",
        key:"profit",
        data:[
            [2380,	"",	6977,	8896,	4012,	3803,	5408,	3415,	3056],
            [9180,	"",	39,	9445,	3917,	"",	18,	5239,	2516],
            [1924,	8734,	1819,	1838,	2330,	7921,	9219,	"",	3537],
        ]
    },
];

table.setSheets(sheetDefs);

Add Sheet

You can add a new sheet to the end of the existing set of sheets by calling the addSheet function, passing the sheet definition for the sheet as the first argument. The function returns the Sheet Component for the new sheet:

var sheetDef = {
    title:"New Sheet",
    key:"new",
    data:[
        [2380,	"",	6977,	8896,	4012,	3803,	5408,	3415,	3056],
        [9180,	"",	39,	9445,	3917,	"",	18,	5239,	2516],
        [1924,	8734,	1819,	1838,	2330,	7921,	9219,	"",	3537],
    ]
};

var sheet = table.addSheet(sheetDef);

Get Sheet Definitions

You can get the sheet definitions for all current sheets by using the getSheetDefinitions function:

var sheetDefs = table.getSheetDefinitions();

This is particularly useful if you want to capture state of all the current sheets, you can then load this back into the table via the setSheets function at a later date to restore the tables state.

Get All Sheet Components

You can retreive an array of all current Sheet Components using the getSheets function:

var sheets = table.getSheets();

Get Sheet Component

You can retreive a Sheet Component for a specific sheet using the getSheet function, the first argument of this function is a Sheet Lookup for the sheet you want to retrieve:

var sheet = table.getSheet("info"); //get the sheet component for the info sheet

Set Sheet Data

You can replace the data on a sheet by calling the setSheetData function, the first argument of this function is a Sheet Lookup for the sheet you want to retrieve, the seciond argument is the data array:

var data = [
    [2380,	"",	6977,	8896,	4012,	3803,	5408,	3415,	3056],
    [9180,	"",	39,	9445,	3917,	"",	18,	5239,	2516],
    [1924,	8734,	1819,	1838,	2330,	7921,	9219,	"",	3537],
];
    
 table.setSheetData("info", data); //set data on info sheet

If you only pass data into this function it will replace the data on the currently active sheet:

var sheet = table.getSheet("info"); //get the sheet component for the info sheet:

var data = [
    [2380,	"",	6977,	8896,	4012,	3803,	5408,	3415,	3056],
    [9180,	"",	39,	9445,	3917,	"",	18,	5239,	2516],
    [1924,	8734,	1819,	1838,	2330,	7921,	9219,	"",	3537],
];
    
 table.setSheetData(data); //set data on the active sheet

Get Sheet Data

You can retrieve the data from a sheet by calling the getSheetData function, the first argument of this function is a Sheet Lookup for the sheet you want to retrieve:

var data = table.getSheetData("info"); //get the data from the info sheet

Clear Sheet

You can clear all data on a sheet by calling the clearSheet function, the first argument of this function is a Sheet Lookup for the sheet you want to clear:

table.clearSheet("info"); //clear the data from the info sheet

Make Sheet Active

You can make a sheet active by calling the activeSheet function, the first argument of this function is a Sheet Lookup for the sheet you want to make active:

table.activeSheet("info"); //make the info sheet active

Remove Sheet

You can remove a sheet from the table by calling the removeSheet function, the first argument of this function is a Sheet Lookup for the sheet you want to remove:

table.removeSheet("info"); //remove the info sheet from the table

Components

Sheet Component

With the introduction of the spreadsheet module, we also see the introduction of the new sheet component, this provides access to the functionality of a particular sheet and provides a wide range of functions for manipulating that sheet.

The example below shows how the component is passed into the sheetUpdated event

table.on("sheetUpdated", function(sheet){
    //sheet - sheet component for the affected sheet
    alert("The user has updated a sheet: "+ sheet.getTitle());
});

The component has the following functions:

Get Title

You can get the title of a sheet by calling the getTitle function:

var title = sheet.getTitle();

Set Title

You can set the title of a sheet by calling the setTitle function, the first argument should be the new title:

sheet.setTitle("Info");

Get Key

You can get the key of a sheet by calling the getKey function:

var key = sheet.getKey();

Get Definition

You can get the definition object of a sheet by calling the getDefinition function:

var def = sheet.getDefinition();

Set Row Count

You can set the row count of a sheet by calling the setRows function, the first argument should be the number of rows for the sheet:

sheet.setRows(20);

Set Column Count

You can set the row count of a sheet by calling the setColumns function, the first argument should be the number of columns for the sheet:

sheet.setColumns(20);

Get Data

You can get the data array of a sheet by calling the getData function:

var data = sheet.getData();

Set Data

You can set the data array of a sheet by calling the setData function, the first argument of the function is the data array:

data = [
    [9937,	"",	"",	7749,	9816,	4355,	8279,	"",	""],
    [2380,	"",	6977,	8896,	4012,	3803,	5408,	3415,	3056],
    [9180,	"",	39,	9445,	3917,	"",	18,	5239,	2516],
    [1924,	8734,	1819,	1838,	2330,	7921,	9219,	"",	3537],
    ["",	8665,	5875,	9732,	1926,	"",	9743,	8388,   ""],
];

sheet.setData(data);

Clear

You can clear the data of a sheet by calling the clear function:

sheet.clear();

Remove

You can remove a sheet from the table by calling the remove function:

sheet.remove();

Activate

You can make a sheet the active sheet by calling the active function:

sheet.active();

Resize Guides

By default when resizing columns or rows, the row will automatically resize as you drag the elements edge across the table. While this is often desierable, if you have complex cell contents this can sometimes lead to unpleasent or jittery redrawing of the table.

To improve these scenarios, the resize modules now provide resize guides. When using guides, when you drag the edge of a column or row, a guide is shown that helps you see how big the element will be when you have finished dragging, but it will only actually resize the elements when the resize is complete.

Column Resize Guides

Column resize guides can be enabled with the resizableColumnGuide option. These guides will only appear on columns with the resizable option enabled in their column definition.

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

Row Resize Guides

Row resize guides can be enabled with the resizableRowGuide option. These guides will only appear if the resizableRows option is enabled.

var table = new Tabulator("#example-table", {
    resizableRows: true,
    resizableRowGuide: true,
});

Editing

Empty Value

When editing a cell, if a user clears the value of the cell and then leaves focus the value of the cell is often set to an empty string "" or other similarly empty value. This is not always a desierable option, you may want to ensure that empty cells always have the same value, for example a value of undefined.

For this reason the editorEmptyValue option lets you set what value should be assigned to a cell when it is edited and the value is empty.

Tabulator considers an edit to be empty when the value is either:

An empty string
null
undefined

The editorEmptyValue option can either be set on the table as a whole to affect all columns.

var table = new Tabulator("#example-table", {
    editorEmptyValue:undefined, //set empty cell values to undefined after edit
});

Or on a column definition alongside an editor.

{title:"Name", field:"name", editor:"input", editorEmptyValue:undefined}

If neither of these options are set, then the empty cell will be asigned the value returned from the editor.

Empty Value Classification

As mentioned above, Tabulator will consider a very specific list of values to be empty, you can customise this behaviour using the editorEmptyValueFunc option, that lets you define custom callback logic to determine what is classed as empty.

You should pass a callback to this option that takes the edited value as its first argument, it should return a value of true if the value should be considered empty:

var table = new Tabulator("#example-table", {
    editorEmptyValue:undefined, //set empty cell values to undefined after edit
    editorEmptyValueFunc:(value) =>{ 
        return value === ""; //only consider empty strings as empty
    },
});

This can also be set on a column by column basis in the column definition:

{title:"Name", field:"name", editor:"input", editorEmptyValue:undefined, editorEmptyValueFunc:(value) =>{ 
    return value === ""; //only consider empty strings as empty
}}

Exporting

Empty Columns

In previous version of Tabulator, when you exported data from the table (print, clipboard, download, etc) it would include all visible columns whether they contained data or not. This was problematic as it resulted in empty columns in the output.

From this version onwards, only columns with a field set in their definitions will be included in the output, this is because exports are generated from table data, and if a column has no field it has no data.

If you want to force the column to be visible in the output even with no field set then you can use the export visibility column definition prop for that export method to force the field to reamin in the output.

For example if we wanted to force this empty column to appear in the output we could set the download column definition option to true:

{title:"Empty", download:true}

Row Header Exports

The export module has been updated to include exporting of the new row headers by default (as long as it has a field set). You can override this bhaviour using the relevant rowHeaders option as needed

Print Row Headers

If you want to prevent row headers being shown in the print output, you can set the rowHeaders property to false in the printConfig option

var table = new Tabulator("#example-table", {
    printConfig:{
        rowHeaders:false, //do not include row headers in printed table
    },
});

Download Row Headers

If you want to prevent row headers being shown in a downloaded file, you can set the rowHeaders property to false in the downloadConfig option

var table = new Tabulator("#example-table", {
    downloadConfig:{
        rowHeaders:false, //do not include row headers in downloaded table
    },
});

Clipboard Row Headers

If you want to prevent row headers being shown in the clipboard output, you can set the rowHeaders property to false in the clipboardConfig option

var table = new Tabulator("#example-table", {
    clipboardConfig:{
        rowHeaders:false, //do not include row headers in clipboard data
    },
});

HTML Row Headers

If you want to prevent row headers being shown in the HTML output of the getHTML function, you can set the rowHeaders property to false in the htmlOutputConfig option

var table = new Tabulator("#example-table", {
    htmlOutputConfig:{
        rowHeaders:false, //do not include row headers in HTML table
    },
});

Export Config Defaults

The export module has been updated to allow it to be extended to handle custom definitions for row and column lookups for exports.

Column Lookups

This module can be extended to add custom column lookups to define which columns should be included in an exported output. It should return an array of columns, or undefined if all columns are to be included:

Tabulator.extendModule("clipboard", "columnLookups", {
    range:function(clipboard){
        return this.modules.selectRange.selectedColumns(); //array of columns
    }
});

This can be used on any range lookup type property that exports data from the table such asclipboardCopyRowRange property in the settings object.

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

Row Lookups

This module can be extended to add custom row lookups to define which rows should be included an exported output. It should return an array of rows:

Tabulator.extendModule("clipboard", "rowLookups", {
    range:function(clipboard){
        return this.modules.selectRange.selectedRows(); //array of rows
    }
});

This can be used on any range lookup type property that exports data from the table such asclipboardCopyRowRange property in the settings object.

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

Accessors

Row Number

A common problem at the moment is when you include the row number formatter in your table to show the number for each row, but that information is not included in your exported data (print, clipboard, download, etc)

A new built in rownum accessor has been added in this release to support including the rownum in exported table data.

In order for this to work you will need to make sure that you have set a field for the row number to be read from.

{title:"Example", formatter:"rownum", field:"rownum", accessor:"rownum"}

Events

A number of new events have been added in this release

Row Events

Row Height

The rowHeight event will be triggered when the height of a row is set or changed.

table.on("rowHeight", function(row){
    //row - row component of the resized row
});

Row Resizing

The rowResizing event will be triggered when a row has started to be resized by the user.

table.on("rowResizing", function(row){
    //row - row component of the resizing row
});

Column Events

Column Width

The columnWidth event will be triggered when the width of a column is set or changed.

table.on("columnWidth", function(column){
    //column - column component of the resized column
});

Column Resizing

The columnResizing event will be triggered when a column has started to be resized by the user.

table.on("columnResizing", function(column){
    //column - column component of the resizing column
});

Spreadsheet Events

Sheet Added

When a sheet is added to the table the sheetAdded event will triggered, passing the sheet component for the sheet:

table.on("sheetAdded", function(sheet){
    //sheet - sheet component for sheet
});

Sheet Loaded

When a sheet is loaded into view sheetLoaded event will triggered, passing the sheet component for the sheet. This event will occour when a sheet is made active or its data is replaced:

table.on("sheetLoaded", function(sheet){
    //sheet - sheet component for sheet
});

Sheet Updated

When the configuration of a sheet is changed, the sheetUpdated event will triggered, passing the sheet component for the sheet:

table.on("sheetUpdated", function(sheet){
    //sheet - sheet component for sheet
});

Sheet Removed

When a sheet is removed from the table, the sheetRemoved event will triggered, passing the sheet component for the sheet:

table.on("sheetRemoved", function(sheet){
    //sheet - sheet component for sheet
});

Internal

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

Table Lifecycle Events

Key	Type	Arguments	Response	Notes
table-initialized	dispatch			Table initialized flag has been set

CSS Styling

Spreadsheet

A number of new CSS classes have been added to the table with the new spreadsheet module

Class	Element Description
tabulator-spreadsheet-tabs	The holding element for spreadsheet tabs
tabulator-spreadsheet-tab	A tab for a spreadsheet
tabulator-spreadsheet-tab-active	Applied to a spreadsheet tab when it is active

Resize Guides

A number of new CSS classes have been added to the table with the resize guide functionality

Class	Element Description
tabulator-col-resize-guide	The resize guide bar shown when resizing a column with guards enabled
tabulator-row-resize-guide	The resize guide bar shown when resizing a row with guards enabled
tabulator-row-header	The cell or column header is part of the row header column

Bug Fixes

v6.0.0 Release

The following minor updates and bugfixes have been made:

The performance of the data tree module has been significantly improved in this release
The scope of the responsiveLayoutCollapseFormatter callback has now be changed to be the table
Fixed issue with range selection functionality nor working with the virtual horizontal renderer
Fixed issue with selection being broken if hidden columns are inside range
Fixed issue with looking up row by position when non-rows are used in the table (eg group headers or column calcs)
Fixed isssue with copying range selections that span over group headers
Header top and bottom border styles are now correctly replicated on exported html & print output
The selectableRange functionality now works correctly when the textDirection of the table is set to rtl
The RangeComponent is now avaliable to import from the ESM package, it was missed out in the last release
Rows now correctly recalculate their height after a responsive collapse event
The tableBuilt event now waits for the intial data load to complete before triggering

v6.0.1 Release

The following minor updates and bugfixes have been made:

Fixed regression preventing autoColumns feature from working on table load when data was coming from a remote source

Version 6.4 Released!

Release Notes

SCSS Overhaul

Bootstrap 5 Dark Mode

Changing Table Height

Changing Table Max Height

Blur Cell On Navigation

v6.4.0 Release

Script Tags

Setup Option

Sheet JS

Script Tags

Setup Option

JS PDF

Script Tags

Setup Option

Luxon

Script Tags

Setup Option

Header Transforms

Value Transforms

Validate Import

Validate File

Validate Data

Adaptable Editor

Customise Editor Lookup

Params Lookup

List Editor Values Lookup

Array Formatter

Value Maps

JSON

Adaptable Formatter

Customise Formatter Lookup

Params Lookup

Array Sorter

Value Maps

Import Mutators

Page Out of Range Behaviour

Range Auto Focus

v6.3.0 Release

v6.3.1 Release

AutoColumns Full Mode

Column Loading Events

Columns Loaded

Column Header Click

Import Events

Import Choosing File

Import Importing File

Import Error

Imported File

Import Events

Column Move Events

v6.2.1 Release

v6.2.2 Release

v6.2.3 Release

v6.2.4 Release

v6.2.5 Release

File Reader Format

Excel Importer

Array Buffer Reader

Dark Mode Site Theme

Looking to the Future

Deprecated Code

Dependencies

Build Files

NPM Commands

Static Properties

Module Names

Module Initialization Order

Extending Other Modules

Simple Spreadsheet Demo

Sheet Size

Loading Data

Cell Setup

Row Header

Exporting Data

Multiple Sheets Demo

Sheet Definitions

Tabs

Ajax Loading

Simple Spreadsheet

Multiple Sheets