Old Documentation

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

Release Notes

Performance Improvements
Build Tools
Columns
Download
Sorting
Popups
Menus
Frozen Columns
Formatting
Events
Internal Events
Callbacks
Bug Fixes

Performance Improvements

This update sees a number of significant performance improvments across a number of different table builds and modules.

UMD Distributions

The UMD distributions, tabulator.js and tabulator.min.js used to use the Bable transpiler as part of their build chain to convert the modern ESM module syntax of the source to something backwards compatible with old ES5 browsers.

This was mainly done to allow backawards compatibility with very old browsers like IE11. But this came at a cost, the transpiled code ran about 5 times slower than the ESM module. Which wase barely noticable on small tables, but really added up with large numbers of rows / columns.

With old browsers like IE11 now having reached end of life, this transpilation is no longer needed, and babel has been removed from the build chain.

This has resulted several improvments to the UMD distributions:

Faster library loading time
8x improvment in data loading and render performance
Smaller file sizes

Backwards Compatibility
As a result of this change, Tabulator will no longer run in environments that require old ES5 support. With all modern browsers being evergreen, and Node JS having long supported the language structures required by Tabulator this shouldn't be a problem.

If you do find that this causes problems for your project, please create an issue on the GitHub repo and we would be happy to add a specific ES5 compatible version of the dist to allow for your usage case.

Module Initialization

The initialization process for each module has been reviewed to ensure it does not trigger unessisary redraws of the table during initialization.

Frozen Columns

The frozen columns module has been completely rebuilt in this release, and now works using position:sticky on frozen cells instead of absolutely positioning them.

This has resulted in a significant performance improvement in horizonal scrolling when frozen columns are enabled.

Column Calculations

Recalculation of column calculations is now blocked when the blockRedraw function is called. When the restoreRedraw function is called, if any recalculations were requested while the table was blocked, then all calculation values are recalculated.

Build Tools

The command line build tools, used for building custom versions of Tabulator have been updated in this release to improve their usability.

Invaild Warning Suppression

To make the build tools simpler and clearer to use, several unnecessary warning that were displayed when Rollup bundled the packages have now been removed. These were shown when using any of the build or dev commands .

Pre-Build Linting

The ESLint tool will now automatically be run before the build tasks when using the build command. Should the linting fail it will present a list of the issues and prevent the build tools from running until they are resolved.

Columns

Header Text Wrap

By default tabulator will truncate overflowing column header title text with an ellipsis if the column is to narrow to contain the title.

If you would prefer the text to wrap, you can now use the new headerWordWrap option.

{title:"This column has a really long title", field:"example", headerWordWrap:true}, //wrap text in column header if it is too narrow

Download

Excel File Compression

File compression has now been enabled by default on the xlsx downloader to significantly reduce the size of the generated file.

Automatic compression can be disabled by setting the compress option to false in the options object:

table.download("xlsx", "data.xlsx", {compress:false}); //prevent compression of output file

Sorting

Header Sort Click Element

By default, header sorting is managed by clicking anywhere on the column header element. You can now restrict this to just the sort icon by setting the headerSortClickElement option to icon:

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

This option can take one of two options:

header - click anywhere on a column header to sort the column (default)
icon - sort only when clicking on the sort arrow in the column header

Popups

Double Click Popups

Popups are now available on double click mouse events. These work in exactly the same way as the click popups, just with different trigger events

Column Header Double Click Popup

You can add a double left click popup to any column by passing the popup contents to the headerDblClickPopup option in that columns definition.

var table = new Tabulator("#example-table", {
    columns:[
        {title:"Name", field:"name", headerDblClickPopup:"Im a Popup"}, //add double click popup to this column header
    ]
});

Cell Double Click Popup

You can add a double click popup to any cell by passing the popup contents to the dblClickPopup option in that columns definition.

var table = new Tabulator("#example-table", {
    columns:[
        {title:"Name", field:"name", dblClickPopup:"Im a Popup"} //add cell click popup
    ]
});

Row Double Click Popup

You can add a double click popup to any row by passing the popup contents to the rowDblClickPopup option in the table constructor object.

var table = new Tabulator("#example-table", {
    rowDblClickPopup:"Im a Popup"
});

Group Header Double Click Popup

You can add a double click popup to any group header by passing the popup contents to the groupDblClickPopup option in the table constructor object.

var table = new Tabulator("#example-table", {
    groupDblClickPopup:"Im a Popup"
});

Programmatic Popups

As well as triggering a popups as a result of user interaction with the table. you can also trigger a popup by calling the popup function on any columns, row, group or cell Components.

This will cause a popup to display next to the component the function is being called on

row.popup("Hey There", "right");

The first argument of the popup function is the contents of the popup, this can take any of the standard popup contents options.

The second optional argument is the position of the popup relative to the components element. This can take one of 5 values:

center - the top left of the popup is positioned in the center of the element (default)
right - the top left of the popup is positioned to the top right of the element
bottom - the top left of the popup is positioned to the bottom left of the element
top - the top left of the popup is positioned to the top left of the element
left - the top left of the popup is positioned to the top left of the element

Menus

Double Click Menus

Menus are now available on double click mouse events. These work in exactly the same way as the click menus, just with different trigger events

Column Header Double Click Menu

You can add a double click menu to any column header by passing the menu array to the headerDblClickMenu option in that columns definition.

var table = new Tabulator("#example-table", {
    columns:[
        {title:"Name", field:"name", headerDblClickMenu:headerContextMenu},
    ]
});

Cell Double Click Menu

You can trigger a cell menu on a double left click by using the dblClickMenu option in the column definition.

//add menu in column definition
var table = new Tabulator("#example-table", {
    columns:[
        {title:"Name", field:"name", dblClickMenu:cellContextMenu},
    ]
});

Row Double Click Menu

You can trigger a row menu on a double left click by using the rowDblClickMenu option in the column definition.

var table = new Tabulator("#example-table", {
    rowDblClickMenu:[
        {
            label:"Delete Row",
            action:function(e, row){
                row.delete();
            }
        },
    ]
});

Group Double Click Menu

You can trigger a group header menu on a double left click by using the groupDblClickMenu table setup option.

var table = new Tabulator("#example-table", {
    groupDblClickMenu:[
        {
            label:"Hide Group",
            action:function(e, group){
                //e - context click event
                //group - group component for group

                group.hide();
            }
        },
    ]
});

Frozen Columns

Module Rebuild

The frozen columns module has been completely rebuilt in this release, and now works using position:sticky on frozen cells instead of absolutely positioning them.

This has resulted in a significant performance improvement in horizonal scrolling when frozen columns are enabled.

A side effect of this is columns now become frozen into position as the scroll to the edge of the screen. This means on tables that have rows narrower than the width of the table, the right frozen columns are now sat next to the table data rather than isolated over to one side.

Horizontal Virtual DOM Compatibility

As a result of this module rebuild, frozen columns are now available when you are using the virtual horizontal renderer for tables with a large number of columns.

RTL Text Direction Compatibility

As a result of this module rebuild, frozen columns are now available when you the table has a textDirection set to rtl

Formatting

Title Formatters

The mock cell component passed into the titleFormatter callback has been updated to include the standard getColumn and getTable functions.

//column definition in the columns array
{title:"Example", field:"example", titleFormatter: function(cell){
    var table = cell.getTable(); //The table the current cell is in
    var table = cell.getColumn(); //The column component for the cell
}}},

Responsive Collapse Formatters

The mock cell component passed into the formatter callback when a cell is rendered in a responsive collapsed layout (when the responsiveLayout option is set to collapse and the table is narrower than its columns) has been updated to include the standard getTable function.

//column definition in the columns array
{title:"Example", field:"example", formatter: function(cell){
    var table = cell.getTable(); //The table the current cell is in
}}},

Events

Mouse Events

A number of new events triggered by the mousedown and mouseup actions have been added

Cell Mouse Down

The cellMouseDown event is triggered when the left mouse button is pressed with the cursor over a cell.

table.on("cellMouseDown", function(e, cell){
        //e - the event object
        //cell - cell component
});

Cell Mouse Up

The cellMouseUp event is triggered when the left mouse button is released with the cursor over a cell.

table.on("cellMouseUp", function(e, cell){
        //e - the event object
        //cell - cell component
});

Row Mouse Down

The rowMouseDown event is triggered when the left mouse button is pressed with the cursor over a row.

table.on("rowMouseDown", function(e, row){
        //e - the event object
        //row - row component
});

Row Mouse Up

The rowMouseUp event is triggered when the left mouse button is released with the cursor over a row.

table.on("rowMouseUp", function(e, row){
        //e - the event object
        //row - row component
});

Column Header Mouse Down

The headerMouseDown event is triggered when the left mouse button is pressed with the cursor over a column header.

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

Column Header Mouse Up

The headerMouseUp event is triggered when the left mouse button is released with the cursor over a column header.

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

Group Mouse Down

The groupMouseDown event is triggered when the left mouse button is pressed with the cursor over a group header.

table.on("groupMouseDown", function(e, group){
        //e - the event object
        //group - group component
});

Group Mouse Up

The groupMouseUp event is triggered when the left mouse button is released with the cursor over a group header.

table.on("groupMouseUp", function(e, group){
        //e - the event object
        //group - group component
});

Callbacks

Mouse Callbacks

A number of new caallbacks triggered by the mousedown and mouseup actions have been added

Cell Mouse Down

The cellMouseDown event is triggered when the left mouse button is pressed with the cursor over a cell, it can be set on a per column basis using the option in the columns definition object.

{title:"Name", field:"name", cellMouseDown:function(e, cell){
        //e - the event object
        //cell - cell component
    },
}

Cell Mouse Up

The cellMouseUp event is triggered when the left mouse button is released with the cursor over a cell, it can be set on a per column basis using the option in the columns definition object.

{title:"Name", field:"name", cellMouseUp:function(e, cell){
        //e - the event object
        //cell - cell component
    },
}

Column Header Mouse Down

The headerMouseDown event is triggered when the left mouse button is pressed with the cursor over a column header, it can be set on a per column basis using the option in the columns definition object.

{title:"Name", field:"name", headerMouseDown:function(e, column){
        //e - the event object
        //column - column component
    },
}

Column Header Mouse Up

The headerMouseUp event is triggered when the left mouse button is released with the cursor over a column header, it can be set on a per column basis using the option in the columns definition object.

{title:"Name", field:"name", headerMouseUp:function(e, column){
        //e - the event object
        //column - column component
    },
}

Internal Events

New internal events have been added in this release.

Vertical Scrollbar

The scrollbar-vertical event is a dispatch type event, that is triggered when the vertical scrollbar has appeared or disappeared from the table.

It passes the current width in pixels of the scroll bar as its first argument. If there is no scroll bar, this value will be 0

this.subscribe("scrollbar-vertical", function(width) => {
    //width - width of vertical scrollbar in pixels
});