Version 5.4 Released!

Click to checkout the new features

Release Notes

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 having long supported that 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 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
});

Bug Fixes

v5.4.0 Release

The following minor updates and bugfixes have been made:

  • The resize table module no longer tirggers an unnessisary table redraw on load
  • Column resize handles are now correctly position for frozen columns
  • The empty table placeholder is now correctly removed when rows are displayed on the table
  • Horizontal virtual renderer now correctly reinitializes rows outside of the viewport after column visibility change
  • The editable column definition option now watis for the row to be intitalized before calling a callback
  • On changing the width of a column, the height of column headers is recalculated to ensure they still fit their contents
  • The responsiveCollapse formatter now uses SVG elements to improve alignment and styling of the toggle element
  • The update function on the row component now correctly uses a strict comparison when checking if incomming data is different from current cell data
  • The navPrev function on a Cell Component now correctly navigates up a row if called on the first editable cell of a column
  • The isVisible function on the Group Component now correctly returns the visibility of the group.
  • Changing the width of a column using the setWidth function on its Column Componenet, will now correctly result in the change in width being persisted
  • Popup functionality no longer triggers "Cannot remove event" console warning when a popup is dismissed before its blur listeners are registered

v5.4.1 Release

The following minor updates and bugfixes have been made:

  • The list editor now correctly filters on the first character when a user types
  • Fixed a render glitch in the horizontal virtual DOM where scrolling in a circle round the table would result in column misalignment
  • The Group Rows module now cleans up old row components when the groups are regenerated
  • Fixed a regression in last release that prevented header filters from scrolling into view when tabbed into focus

v5.4.2 Release

The following minor updates and bugfixes have been made:

  • Fixed regression in grouped rows module that resulted in a console error when editing a cell when the groupUpdateOnCellEdit option was used
  • Movable columns now correctly scroll the header when moving columns off the visible area of the table
  • The scrollToColumn function and column component scrollTo function now work when using grouped columns
  • The default columnCalcs option value of true now correctly hides the table column calculations when grouping is enabled, even when the group by value isnt in an array
  • When using the columnCalcs option with value of true and row grouping enabled, when you add or remove grouping using the setGroupBy function, the table level calculation rows will now be correctly added and removed as needed

Donate