Version 6.3 Released!

Click to checkout the new features
Old Documentation
You are browsing documentation for an old version of Tabulator. Consider upgrading your project to Tabulator 6.3

Release Notes

Performance

This update has seen a number of updates focused at improving the performance of the table with large data sets. Nelow is a summary of areas of performance improvement.

Data Loading Performance

Data loading has now been optimised, and you should see around a 3x - 4x reduction in processing times when data is loaded into the table. This will be particularly noticeable data sets with a large number of rows.

Numeric Sorting

The number sorter has been rebuilt to improve performance when working with simple integer and floating point numbers. By default it will no longer try and do any string manipulation on numbers being sorted (eg removing thousand separators etc). This has resulted in a 7x reduction in numeric sort times.

You can still carry out string processing in the number sorter if needed, using the optional thousandSeparator and decimalSeparator properties in the sorters sorterParams.

Calculation Column Scrolling

The column calculation module has been tweaked to improve horizontal scroll performance when column calculation rows are visible.

Cell Container Initialization

Intialization of event binding and styling on cells now happens without the need to generate the cell contents.

ESM Module

Minified File

A new tabulator.es2015.min.js file is available in the /dist/js/ folder, that provides a minified version of the tabulator.es2015.js file.

Menus

Nested Menus

It is now possible to build out more complex menu systems by using nested sub menus. To add a sub menu to an item, set the menu property with an array of menu items.

Sub menus can be nested as many layers deep as you need.

var table = new Tabulator("#example-table", {
    rowContextMenu: [
        {
            label:"Hide Column",
            action:function(e, column){
                column.hide();
            }
        },
        {
            label:"Sub Menu" //sub menu
            menu:[
                {
                    label:"Do Something"
                    action:function(e, column){
                        //do something
                    }
                },
                {
                    label:"Do Something Else"
                    action:function(e, column){
                        //do something else
                    }
                },
                {
                    label:"Deeper Sub Menu", //sub menu nested in sub menu
                    menu:[
                        {
                            label:"Do Another Thing"
                            action:function(e, column){
                                //do another thing
                            }
                        },
                    ]
                }
            ]
        }
    ]
});

Callback Context

All menu generation callbacks now have the Tabulator object for the table passed in as the this context of the callback

var headerMenu = function(component, e)){
    var columns = this.getColumns();
};

Updated Example

The Menus example has been updated to demonstrate the new nested menu functionality as well as a column visibility picker in the column header menu.

Columns

Maximum Column Width

Maximum Column Width

It is possible to set a maximum column width to prevent resizing columns from becoming too wide.

This can be set globally, by setting the columnMaxWidth option to the column width when you create your Tabulator.

var table = new Tabulator("#example-table", {
    columnMaxWidth:300, //maximum column width of 300px
});

This option can be overridden on a per column basis by setting the maxWidth property on the column definition.

{title:"name", field:"name", maxWidth:200} //set maximum column width to 200px

If you have defined the max column width globally using the columnMaxWidth option, then you can disable it on a per column basis by passing the value false to the maxWidth option in the column definition.

var table = new Tabulator("#example-table", {
    columnMaxWidth:300, //maximum column width of 300px
    columns:[
        {title:"name", field:"name", maxWidth:false} //remove max width on this column
    ]
});

Formatters

Image Formatter

The image formattter has a couple of new params to help customise the source URL of the image

URL Prefix

The urlPrefix option prepends a string to the start of the cell value when generating the image src url

{title:"Example", field:"example", formatter:"image", formatterParams:{
    urlPrefix:"http://website.com/images/", //prepend this string to the start of the image url
}}

URL Suffix

The urlSuffix option prepends a string to the start of the cell value when generating the image src url

{title:"Example", field:"example", formatter:"image", formatterParams:{
    urlSuffix:".png",, //append this string to the end of the image url
}}

Editors

Chrome Focus Outline

All themes have been updated to remove the thick black outline applied to focused editors in the latest releases of Chrome.

Select Editor

Keyboard Navigation

You can now navigate the list in the select editor by typing the value you are looking for on the keyboard while the editor is open, the editor will do a string comparison of the typed word against each label to find a label that starts with the typed word and will then scroll to that item.

After 800 milliseconds of inactivity the search word will reset and the next key press will trigger a new search. The search will only work with alphanumeric characters.

Filtering

Refresh Current Filters

You can now trigger a refresh of the current filters using the refreshFilter function. This function will cause the current filters to be run again and applied to the table data.

This is mainly useful when you are using custom filter functions that use variables from outside of Tabulator to determine what is filtered, when these variables change you can then call the refreshFilter function to update the existing filters.

table.refreshFilter();

History

Clear History

The clearHistory function can be used to clear out the current table interaction history.

table.clearHistory();

Column Groups

Horizontal Alignment

By default column group header titles are left aligned. you can now use the headerHozAlign option to change this in a column groups definition:

var table = new Tabulator("#example-table", {
    columns:[
        {title:"Name", field:"name", width:160},
        {
            title:"Work Info",
            headerHozAlign:"center", //center align text in column group header
            columns:[
                {title:"Progress", field:"progress"},
                {title:"Rating", field:"rating"},
            ],
        },
    ],
});

Ajax

ajaxURLGenerator Function Scope

The ajaxURLGenerator function is now called with the scope of the table so you can now access the parent table on the this variable

var table = new Tabulator("#example-table", {
    ajaxURLGenerator:function(url, config, params){
        this //The table this function is being called on
    },
});

Bug Fixes

V4.9.0 Release

The following minor updates and bugfixes have been made:

  • The sortValuesList parameter on the select editor now works correctly for all types of value list.
  • The footer calculation row in the bootstrap4 theme is now correctly styled when the table-dark class is applied to the table.
  • Fixed issue with paginated tables that under certain circumstances caused a "Maximum call stack size exceeded" error in the adjustTableSize function.
  • The fetch error object is now correctly passed to the catch on the setData functions returned promise.
  • Fixed regression in last release that was causing formatters to be fired twice on cells that contained editors.
  • The progress editor now takes account of cell padding when working out the editor value.
  • Fixed issue with column group widths not persisting when column persistence is enabled and table layout mode is set to fitDataFill
  • Column groups now correctly retain all definition options when restored from config persistence.
  • Responsive Collapse columns now correctly pull titles from the localization module.

V4.9.1 Release

The following minor updates and bugfixes have been made:

  • Fixed regression with the select editor causing all values in the list to be displayed as true when the values property of the editorParam object was set to true

V4.9.2 Release

The following minor updates and bugfixes have been made:

  • Missing dependency for gulp-uglify-es has been added to the package.json
  • Fixed regression with excepion being thrown when rendering table in IE
  • Fixed issue with row components not being passed into custom sorter functions
  • Fixed regression in persitance system that was preventing column order from being persisted
  • Using the paginationInitialPage option with remote pagination no longer results in a console warning if the page is not set to 1
  • Removed debug trace command from movable rows module
  • The select editor now correctly handles false values when used as a header filter with multiselect mode enabled
  • The autocomplete editor is now correctly reset when clearFilter is called, so the showListOnEmpty option now functions as expected
  • The built in header filter empty check function now considers headers with a numeric value of 0 to not be empty
  • The dataTreeSelectPropagate option now correctly includes all child rows in the selection, including ones in a currently collapsed parent
  • The setColumnLayout now works when the horizontal DOM is enabled
  • When focusing on an editable cell with the horizontal virtual DOM enabled, the table now correctly scrolls the cell to be visible
  • Fixed regression preventing UI update of selected rows that had yet to be rendered

V4.9.3 Release

The following minor updates and bugfixes have been made:

  • Fixed regression in the setColumnLayout function

Donate