Release Notes

<div id="v5-2-example-table"></div>

//create row popup contents
var rowPopupFormatter = function(e, row, onRendered){
    var data = row.getData(),
    container = document.createElement("div"),
    contents = "<strong style='font-size:1.2em;'>Row Details</strong><br/><ul style='padding:0;  margin-top:10px; margin-bottom:0;'>";
    contents += "<li><strong>Name:</strong> " + data.name + "</li>";
    contents += "<li><strong>Gender:</strong> " + data.gender + "</li>";
    contents += "<li><strong>Favourite Colour:</strong> " + data.col + "</li>";
    contents += "</ul>";

    container.innerHTML = contents;

    return container;
};

//create header popup contents
var headerPopupFormatter = function(e, column, onRendered){
    var container = document.createElement("div");

    var label = document.createElement("label");
    label.innerHTML = "Filter Column:";
    label.style.display = "block";
    label.style.fontSize = ".7em";

    var input = document.createElement("input");
    input.placeholder = "Filter Column...";
    input.value = column.getHeaderFilterValue() || "";

    input.addEventListener("keyup", (e) => {
        column.setHeaderFilterValue(input.value);
    });

    container.appendChild(label);
    container.appendChild(input);

    return container;
}

//create dummy header filter to allow popup to filter
var emptyHeaderFilter = function(){
    return document.createElement("div");;
}

//initialize table
var table = new Tabulator("#example-table", {
    height:"311px",
    layout:"fitColumns",
    rowClickPopup:rowPopupFormatter, //add click popup to row
    columns:[
        {title:"Name", field:"name", headerPopup:headerPopupFormatter, headerPopupIcon:"<i class='fas fa-filter' title='Filter column'></i>", headerFilter:emptyHeaderFilter, headerFilterFunc:"like"},
    ],
});

Defining a Popup

When definind a popup you can pass one of three types of value into the option. You can pass in a string for the HTML contents of the button

{title:"Name", field:"name", clickPopup:"Hey, Im a Popup!"}

Or you can pass the DOM node for the button. Though be careful not to pass the same node to multple columns or you may run into issues.

//define element
var popupContents = document.createElement("span");
popupContents.innerText = "Hey Im a Popup!";

//column definition
{title:"Name", field:"name", clickPopup:popupContents}

Or you can define a function that is called when the popup is rendered that should return either an HTML string or the contents of the element. This funtion is passed the mouse/touch event as its first argument and the component of the element that triggered the popup as the second argument

{title:"Name", field:"name", clickPopup:function(e, component, onRendered){
    //e - the mouse/touch event that triggered the popup
    //component - column/row/cell component that triggered this popup
    //onRendered - function to call when the formatter has been rendered

    return "Hey Im a Popup!";
}}

The onRendered callback function passed into the third argument allows you to register a callback that will be triggered when the popup has been added to the DOM but before its position is confirmed. This can be useful when you are trying to use a 3rd party library that needs the element to be visible before it can be instatiated

To use this function you need to pass a callback that runs any of your required code as the only argument. The example below uses the jQuery sparkline widget to add a small chart to the popup

{title:"Name", field:"name", clickPopup:function(e, component, onRendered){
    //e - the mouse/touch event that triggered the popup
    //component - column/row/cell component that triggered this popup
    //onRendered - function to call when the formatter has been rendered

    var element = document.createElement("div");

    onRendered(function(){
        $(element).sparkline(component.getValue(), {width:"100%", type:"bar"});
    });

    return element;
}}

Close On Blur

Popups will automatically close when focus on the popup element is lost.

Column Header Popups

Column Header Popup

You can add a popup to any column by passing the popup contents to the headerPopup option in that columns definition.

Adding a header popup will cause a ⋮ button to appear to the left of the column header title. clicking on this button will open the popup.

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

Column Header Popup Icon

When you insert a header popup, Tabulator will add a button to the header element with an ⋮ icon. You can change the contents of this button using headerPopupIcon column definition option

The headerPopupIcon option will accept one of three types of value. You can pass in a string for the HTML contents of the button

{title:"Name", field:"name", headerPopupIcon:"<i class='fas fa-bars'></i>"}

Or you can pass the DOM node for the button. Though be careful not to pass the same node to multple columns or you may run into issues.

//define element
var buttonContents = document.createElement("span");
buttonContents.innerText = "Popup";

//column definition
{title:"Name", field:"name", headerPopupIcon:buttonContents}

Or you can define a function that is called when the column header is rendered that should return either an HTML string or the contents of the element. This funtion is passed the column component as its first argument

{title:"Name", field:"name", headerPopupIcon:function(component){
    //component - column component for header

    return "<i class='fas fa-bars'></i>";
}}

Column Header Context Popup

You can add a right click popup to any column by passing the popup contents to the headerContextPopup option in that columns definition.

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

Mobile Devices
When used on a mobile device the context menu will be triggered by a long press on the element

Row Popups

Row Click Popup

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

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

Row Context Popup

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

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

Mobile Devices
When used on a mobile device the context menu will be triggered by a long press on the element

Cell Popups

Cell Click Popup

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

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

Cell Context Popup

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

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

Group Popups

Group Header Click Popup

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

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

Group Header Context Popup

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

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

Popup Events

A couple of popup events have been added to help track when popup functionality is in use

Popup Opened

The popupOpened callback is triggered when a popup is opened.

table.on("popupOpened", function(component){
    //component - the component the popup has been opened on (could be cell, row or column depending on popup)
});

Popup Closed

The popupClosed callback is triggered when a popup is closed.

table.on("popupClosed", function(component){
    //component - the component the popup has been closed for (could be cell, row or column depending on popup)
});

Tooltips

Tooltip functionality has been moved into its own module, and now uses the internal table popup functionality to generate tooltips instead of the browser based title attribute on the cell elements.

The major benifit of this approach is that tool tips are now fully customisable, you can style them as you like using the new tabulator-tooltip class, and they now support full HTML content.

Tooltip Generation Mode

As a result of this migration the tooltipGenerationMode table option has been removed as tooltips are now always generated at the moment they are displayed.

Cell Tooltips

You can set tooltips to be displayed when the cursor hovers over cells, these can contain any value and be formatted in any way you like.

Tooltips can either be set per column in the column definition object

//column definition object in the columns array
{title:"Name", field:"name", tooltip:true},

Or globally in the columnDefaults object:

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

The tooltip parameter can take three different types of value

• boolean - a value of false disables the tooltip, a value of true sets the tooltip of the cell to its value
• string - a string that will be displayed for all cells in the matching column/table.
• DOM Node - a DOM node for the tooltip
• function - a callback function that returns either the html/text contents for the tooltip, or a DOM node for the contents of the tooltip:

The function accepts three arguments, the first is the mouseover event object that triggered the tooltip, the second is CellComponent for the cell the tooltip is being generated for, the third argument is the onRendered function that allows you to register a callback that will be triggered when the popup has been added to the DOM but before its position is confirmed.

This function will also allow you to style the tooltip by applying styles to the returned element if desired

var table = new Tabulator("#example-table", {
    columnDefaults:{
        tooltip:function(e, cell, onRendered){
            //e - mouseover event
            //cell - cell component
            //onRendered - onRendered callback registration function

            var el = document.createElement("div");
            el.style.backgroundColor = "red";
            el.innerText = cell.getColumn().getField() + " - " + cell.getValue(); //return cells "field - value";

            return el; 
        },
    }
});

Column Header Tooltips

It is also possible to set tooltips to display on the column headers. This is particularly useful when your columns are too narrow to display full header names.

Header tooltips can either be in a columns definition object:

//column definition object in the columns array
{title:"name", field:"name", headerTooltip:true},

The tooltip headerTooltip can take three different types of value

• boolean - a value of false disables the tooltip, a value of true sets the tooltip of the column header to its title value.
• string - a string that will be displayed for the tooltip.
• DOM Node - a DOM node for the tooltip
• function - a callback function that returns either the html/text contents for the tooltip, or a DOM node for the contents of the tooltip:

The function accepts three arguments, the first is the mouseover event object that triggered the tooltip, the second is ColumnComponent for the column header the tooltip is being generated for, the third argument is the onRendered function that allows you to register a callback that will be triggered when the popup has been added to the DOM but before its position is confirmed.

This function will also allow you to style the tooltip by applying styles to the returned element if desired

var table = new Tabulator("#example-table", {
    columnDefaults:{
        headerTooltip:function(e, cell, onRendered){
            //e - mouseover event
            //cell - cell component
            //onRendered - onRendered callback registration function

            var el = document.createElement("div");
            el.style.backgroundColor = "red";
            el.innerText = column.getDefinition().title;

            return el; 
        },
    }
});

Alerts

This release provides access to Tabulators alert system. Alerts provide full table modal take over messages, with a semi transparent full table sized background and a centered message. These are used for example to show a loading message when the table is loading remote data via ajax request.

Showing an Alert

To show an alert, call the alert function on the table. Passing the message into the first argument of the function.

table.alert("This is an alert!");

The alert function will accept one of several diffrent types alert:

• string - A text string or valid HTML content for the alert
• DOM node - A DOM Node of the element to be included inside the alert

Alert Styles

The alert function also provides a way to style the alert message being presented to the user. There are two built in styles:

• msg - A black border with black text (default)
• error - A red border with red text

You can pass the style into the optional second argument of the alert function:

table.alert("This is an alert!", "error");

Behind the scenes this works by applying the tabulator-alert-state-error class to the .tabulator-alert-msg element. You can therefor provide any string you like to the second argument and then use it to apply custom styles to the alert.

For example if we passed a value of warning to the second argument of the alertfunction the tabulator-alert-state-warning class to the .tabulator-alert-msg element

Clearing an Alert

To clear an active alert, call the clearAlert funtion on the table.

table.clearAlert();

Rows

Fixed Row Height

You can use the new rowHeight option to force a height for all rows in the table. This should be set to an integer value in pixels. Setting the value to false will result in the rows resizing to fit their contents

var table = new Tabulator("#example-table", {
    rowHeight:40, //set rows to 40px height
});

Sorting

Date Sorter

The date sorter will now accept a luxon DateTime object as the cell value. If this is the case then you can ignore the format option in the sorterParams.

Time Sorter

The time sorter will now accept a luxon DateTime object as the cell value. If this is the case then you can ignore the format option in the sorterParams.

Date Time Sorter

The datetime sorter will now accept a luxon DateTime object as the cell value. If this is the case then you can ignore the format option in the sorterParams.

Formatting

Link Formatter

The labelField option of the formatterParams object for the link formatter has been updated to handle accessing data in nested column fields. This will use the same seperator as the tables nestedFieldSeparator option.

{title:"Example", field:"example", formatter:"link", formatterParams:{labelField:"address.postcode"}} //set the formatter label to the value in the row data opject for the postcode property of the address object

Money Formatter

The thousand option of the formatterParams object for the money formatter will now accept a boolean value of false to disable the thousand separator

{title:"Example", field:"example", formatter:"money", formatterParams:{thousand:false}} //disable thousand separator

Date Time Formatter

The datetime formatter will now accept a luxon DateTime object as the cell value. If this is the case then you can ignore the inputFormat option in the formatterParams.

Date Time Difference Formatter

Date Humanizing

The humanize option of the formatterParams object for the datetimediff formatter has been restored to functionality in this release, using the toHuman functionality introduced in the 2.3 release of Luxon.

As a result of this the unit option will now also accept an array of units that can be used to define how the diference will be humanized

{title:"Example", field:"example", formatter:"datetimediff", formatterParams:{
    units:["months", "days", "hours"],
    humanize:true,
}}

Luxon DateTime Input

The datetimediff formatter will now accept a luxon DateTime object as the cell value. If this is the case then you can ignore the inputFormat option in the formatterParams.

TickCross Formatter

The tickCross formatter has a new trueValue param that allows you to define the exact value that causes the tick to be shown

{title:"Example", field:"example", editor:"tickCross", editorParams:{
    trueValue:"car", //show a tick if the cells value is the string "car"
}}

Editing

Contents Selection on Focus

The input, number and textarea editors have been update to include the new selectContents editor param.

When the selectContents parameter is set to true the editor will automatically select its text contents when its cell is focused.

{title:"Example", field:"example", editor:"input", editorParams:{selectContents:true}}

Checkbox Editor

The tickCross editor has had two new params added. The trueValue and falseValue options allow you to define that values retured from the editor

{title:"Example", field:"example", editor:"tickCross", editorParams:{
    trueValue:"car", //return a value of "car" if the checkbox is ticked
    falseValue:"bike", //return a value of "bike" if the checkbox is unticked
}}

Select Editor

The select editor has been removed and replaced with the new list editor

Autocomplete Editor

The autocomplete editor has been removed and replaced with the new list editor

List (Select/Autocomplete)

The new list editor replaces the existing select and autocomplete and provides a wide range of options for all your list based editing needs.

The editor creates a dropdown list to allow the user to select from some predefined options, by default it functions as a select list type element but can also be configured to function as an autocomplete.

{title:"Example", field:"example", editor:"list", editorParams:{
    //Value Options (You should use ONE of these per editor)
    values:["red", "green", "blue", "orange"], //an array of values or value/label objects
    valuesURL: "http://myvalues.com", //a url to load the values from
    valuesLookup:"active", //get the values from the currently active rows in this column

    //Value Lookup Configuration (use these with valuesLookup Option)
    valuesLookupField:"color", //the field to lookup values from

    //General Options
    clearable:true, //show clear "x" button on editor
    itemFormatter:function(label, value, item, element){
        //label - the text label for the item
        //value - the value for the item
        //item - the original value object for the item
        //element - the DOM element for the item

        return "<strong>" + label + " </strong><br/><div>" + item.subtitle + "</div>";
    },
    elementAttributes:{ //set attributes on input element
        maxlength:"10", //set the maximum character length of the input element to 10 characters
    },
    verticalNavigation:"hybrid", //navigate to new row when at the top or bottom of the selection list
    sort:"asc", //sort direction for the values list
    defaultValue:"Steve Johnson", //the value that should be selected by default if the cells value is undefined
    emptyValue:null, //the value that should be asigned to the cell if the editor is left with an empty value
    maxWidth:true, //prevent width of list item from exceeding width of cell
    placeholderLoading:"Loading List...", //set custom placeholder when loading list values
    placeholderEmpty:"No Results Found", //set custom placeholder when list is empty

    //Select Options (only available when autocomplete:false)
    multiselect:true, //allow selection of multiple items from the list

    //Autocomplete Options (only available when autocomplete:true)
    autocomplete:true, //enable autocomplete mode,
    filterFunc:function(term, label, value, item){ //replace built in filter function with custom
        //term - the string being searched for
        //label - the text label for the item
        //value - the value for the item
        //item - the original value object for the item

        return label === term;
    },
    filterRemote:true, //pass filter term to remote server in request instead of filtering
    filterDelay:100, //delay in milliseconds after typing before filter begins
    allowEmpty:true, //allow the user to leave the cell empty
    listOnEmpty:true, //show all values in the list if the input is empty
    mask:"AAA-999", //apply input mask to text entry
    freetext:true, //allow the user to set the value of the cell to a free text entry
}}

The editor has many optional properties for the editorParams object:

• values - either an array of values, or value objects (this is explained in more detail in the next section)
• valuesURL - the url to load the values for the list from
• valuesLookup - lookup the values for the list from a column in the table, this option sets which range of data should be loaded, or provides a function to dynamically set the data
• valuesLookupField - the field the values for this list should be looked up from
• clearable - adds a clear button to the right of the editor to allow the user to empty the current value
• itemFormatter - change how the items in the list are displayed
• elementAttributes - set attributes directly on the input element
• verticalNavigation - determine how use of the up/down arrow keys will affect the editor, this can take three different types of value:
  • editor - value selection up and down the list, will not navigate round the table (default)
  • table - the arrow keys will navigate to the prev/next row and will not change the selected value in the list
  • hybrid - the arrow keys move the value selection up and down the list, when it reaches the end of the list it moves on to the adjacent row
• sort - sort the items in the list, either asc or desc or a custom sorter function
• defaultValue - set the value that should be selected by default if the cells value is undefined
• emptyValue - set the value that will be set on the cell if the user leave the input empty
• maxWidth - the list will by default expand to fit the contents of the list, if you wish to constrain the width of the list, you can either pass an integer for the maximum width of the list in pixels, or the value true which will fit the list to the width of the current cell
• placeholderLoading - set custom placeholder when loading list values, this can either be a text string, a valid HTML string a DOM Element, or a function, that will be called and passed in the cell component and the current list element and should return one of the above valid placeholder values.
• placeholderEmpty - set custom placeholder when list is empty, this can either be a text string, a valid HTML string a DOM Element, or a function, that will be called and passed in the cell component and the current list element and should return one of the above valid placeholder values.
• multiselect - set this to true to allow the user to choose multiple values. With this option enabled the editor will accept and return an array of values. (this option is only available when the autocomplete option is disabled)
• autocomplete - set this to true to allow the user to filter the options list by typing in the input.
• filterFunc - a custom filter function to define how an autocomplete should filter its row values. (this option is only available when the autocomplete option is enabled)
• filterRemote - When using a remote data source like Ajax, this tells hte auto complete to submit the search term as part of the request instead of triggering a local filter function. (this option is only available when the autocomplete option is enabled)
• filterDelay - The delay in milliseconds between a person typing a letter and the filter begginging, used to delay filtering until the user has finished typing. (default value 300 - this option is only available when the autocomplete option is enabled)
• allowEmpty - allow the user to save an empty value to the cell. (this option is only available when the autocomplete option is enabled)
• listOnEmpty - show the whole list of values when the cell is empty. (this option is only available when the autocomplete option is enabled)
• mask - apply a mask to the input to allow characters to be entered only in a certain order (this option is only available when the autocomplete option is enabled) (see Text Input Masking for more information)
• freetext - allow the user to press enter to save a value to the cell that is not in the list (this option is only available when the autocomplete option is enabled)

Values

There are multiple ways you can define the values in list depending on your needs, the sections below outline each detail

Values - Array / Object

You can pass in an array of values to the vaulues param:

{title:"Example", field:"example", editor:"autocomplete", editorParams:{values:["red", "green", "blue", "orange"]}}

In this mode, the value will also be used as the label for the list item.

If you want to show a different label to the value you want to store, you can pass in an object, where the key of each property is the value that will be stored if it is selected, and the value of each property will be the label displayed for it in the list.

{title:"Name", field:"name", editor:"autocomplete", editorParams:{
    values:{
        "steve":"Steve Boberson",
        "bob":"Bob Jimmerson",
        "jim":"Jim Stevenson",
    }
}}

You can alternativly pass an array of value objects, each with a value and label object, if you would like to specify a different label for each value and their order. You can also add custom properties to each of the objects that will be accessible in the sort, filter and layout functions if you want to use other data in your list

With an array of value objects, you can also create groups of options using the options property on an item and passing an array of value objects to the prop.

In the complex structure you can also use the elementAttributes property to define attributes directly on the list item element

{title:"Name", field:"name", editor:"select", editorParams:{
    values:[
        {
            label:"Steve Boberson",
            value:"steve",
            keywords:"red, green, blue, orange", // custom field
            description:"Likes to drive a car", // custom field
        },
        { //option group
            label:"Men",
            options:[ //options in option group
                {
                    label:"Steve Boberson",
                    value:"steve",
                    elementAttributes:{
                        class:"primary-name",
                    }
                },
                {
                    label:"Bob Jimmerson",
                    value:"bob",
                },
            ]
        },
        { //option group
            label:"Women",
            options:[ //options in option group
                {
                    label:"Jenny Jillerson",
                    value:"jenny",
                },
                {
                    label:"Jill Betterson",
                    value:"jill",
                },
            ]
        },
        {//ungrouped option
            label:"Other",
            value:"other",
        },
    ]
}}

Values - Lookup From Column

Using the valuesLookup option cause the editor to lookup the unique values from a column on the table.

When using the valuesLookup option, it is used to specify the range of rows that shoul be used for the lookup, and takes any of the standardRow Range Lookup.

It should be used in conjunction with the valuesLookupField option in which you can set the field name for the column you want to lookup the data from.

{title:"Name", field:"name", editor:"autocomplete", editorParams:{
    valuesLookup:true,  //lookup all unique values
    valuesLookupField:"people", //lookup all unique values from the people column
}}

If you leave out the valuesLookupField option it will lookup the values from the current column:

{title:"Name", field:"name", editor:"autocomplete", editorParams:{
    valuesLookup:"active",  //lookup filtered unique values in this column
}}

Alternativly if you want to generate the content in a different way, you can pass a callback to the valuesLookup option that should return a value array or object. The callback is passed in the Cell Component for the cell being edited, and the currenty value of the input in case you are using the filterRemote option.

{title:"Name", field:"name", editor:"autocomplete", editorParams:{
    valuesLookup:function(cell, filterTerm){
        //cell - the cell component for the current cell
        //filterTerm - the current value of the input element

        return [
            {
                label:"Steve Boberson",
                value:"steve",
            },
            {
                label:"Bob Jimmerson",
                value:"bob",
            },
            {
                label:"Jenny Jillerson",
                value:"jenny",
            },
            {
                label:"Jill Betterson",
                value:"jill",
            },
        ];
    }
}}

If you want to carry out an asynchronous function in this callback, like a custom ajax request, then you can return a promise from this function that should resolve with the value array / object.

Values - Remote Ajax Source

If you want to lookup data from a remote ajax source, you can get the table to make a simple AJAX get request to a url by passing it to the valuesURL option.

If you are also using filterRemote then the current value of the input element will aslo be passed in the request as the term parameter.

The request should respond with a JSON encoded values array/object.

{title:"Name", field:"name", editor:"autocomplete", editorParams:{
    valuesURL:"http://getdata.fromhere.com",  //get value list from URL
}}

The valuesURL option is only intended for a simple GET ajax request. If you need to make a different/more complex request, then you should use the valuesLookup option and make the ajax request yourself.

While making the request, a placeholder element will be displayed to the user, the contents of this placeholder can be set using the placeholderLoading option. This can either be a text string, valid HTML, a DOM node or a callback function that will return one of those options. If you use a callback function, the first argument will be the Cell Component for the cell being edited.

{title:"Name", field:"name", editor:"autocomplete", editorParams:{
    valuesURL:"http://getdata.fromhere.com",  //get value list from URL
    placeholderLoading:"Loading Remote Data...", //set a custom placeholder text
}}

Formatting List

By default, Tabulator will render the values list as a simple list of text values. You can choose to format the list in any way you like, using the itemFormatter option.

This option takes a callback that will be called for each item in the list, it will be passed in the value of the item the first argument, the label for the item as the second argument, the original value object for the component as its third argument, complete with any custom properties that may have been set and the containing element for the list item as the fourth argument incase you wish to directly manipulate it by applying classes etc.

The callback return a text string, valid HTML, or a DOM node for the contents of the item.

{title:"Name", field:"name", editor:"autocomplete", editorParams:{
    itemFormatter:function(label, value, item, element){
        //label - the text label for the item
        //value - the value for the item
        //item - the original value object for the item
        //element - the DOM element for the item

        //return the initial label as a bold line and then second line in regular font weight containing the value of the custom "subtitle" prop set on the value item object.
        return "<strong>" + label + " </strong><br/><div>" + item.subtitle + "</div>";
    },
}}

Sorting List

By default no sort will be applied to the values list. it will appear in the order the items were defined. You can sort the list using the sort option, this can take the string value of asc to sort the list in ascending order by label, or the string value of desc to sort the list in descending order by label.

{title:"Name", field:"name", editor:"autocomplete", editorParams:{
    sort:"asc", //sort list in ascending order
}}

By default, Tabulator uses an alphanumeric sort on list values. If you would like to apply a custom sort to the list, then you can also pass a callback function into this option. This callback will function in the same way as the comparison function passed to the standard JavaScript sort function, it should return -1 if value "a" is less than value "b", 1 if it is greater than, and 0 if they are equal.

The function is passed in several arguments:

{title:"Name", field:"name", editor:"autocomplete", editorParams:{
    sort:(aLabel, bLabel, aValue, bValue, aItem, bItem){
        //aLabel - the text label for item a
        //bLabel - the text label for item b
        //aValue - the value for item a
        //bValue - the value for item b
        //aItem - the original value object for item a
        //bItem - the original value object for item b

        
        //sort by numeric values
        return aValue < bValue ? -1 : (aValue == bValue ? 0 : 1);
    },
}}

Filtering List

When using the editor with autocomplete enabled, the list will be filtered every time the user types in the input. By default this is accomplished using a case-insensitive string comparison between the value of the input element and the label of the list item.

If you wish to filter in a different way, you can pass a callback to the filterFunc option. This option is passed four aguments, the term being searched for, the label of the item, the value of the item, and the item object. It should return true if the item matches the term and false if it does not

{title:"Name", field:"name", editor:"autocomplete", editorParams:{
    filterFunc:(term, label, value, item){
        //term - the string value from the input element
        //label - the text label for the item
        //value - the value for the item
        //item - the original value object for the item

        //filter strictly against the value of the item
        return term === value;
    },
}}

If you are retreiving your data from a remote source using either the valueURL option, or a promise return from a callback on the valuesLookup option, then you can choose to filter your data remotely instead and bypass the local filter.

This can be accomplished using the filterRemote option. With this enabled, the local filter will not be run, instead the remote request will be retriggered with the current search term pass as an argument.

{title:"Name", field:"name", editor:"autocomplete", editorParams:{
    valuesURL:"http://getdata.fromhere.com",  //get value list from URL
    filterRemote:true,
}}

Validation

Validation Failed Event

The validationFailed event is triggered when the value entered into a cell during an edit fails to pass validation. and now includes a list of failed validators in the third argument to the event callback

table.on("validationFailed", function(cell, value, validators){
    //cell - cell component for the edited cell
    //value - the value that failed validation
    //validators - an array of validator objects that failed
});

The validators argument contains a an array of validator objects for each validator that has failed. each object has a type prop which is the key for that validator (eg. "required"), and parameters prop which contains any props passed with the validator

In the example below, the validation failed on the min validator with its parameter set to 5:

[
    {
        key:"min"
        parameters:5,
    }
]

Cell Component Validation

The cell component isValid function has been updated to return a value of true if the cell passes validation, or an array of failed validators if it fails validation.

var valid = cell.isValid();

The cell component validate function already works in this way as of version 5.0.

Filters

Events

in previous releases, the dataFiltering and dataFiltered events were passed an array of current filters that exluded the header filters. In this release this argument has been updated to include both header filters and programatic filters for the dataFiltering and dataFiltered events.

table.on("dataFiltering", function(filters){
    //filters - array of all filters currently applied
});

Internal Events

Subscription Order

This isnt a new feature but rather one that was missed from earlier documentation. I have included it here to bring this to peoples attention incase it is of use.

Multiple callbacks can be subscribed to the same event, and by default they will be called in the order they are subscribed.

You can pass an integer into the optional third argument of the subscribe function to determine the order that the subscriber is called. By default callbacks are subscibed with an order of 10,000. Values with a lower order are called before those of a higher order, subscriptions of the same order are called in the order that they were subscribed.

this.subscribe("example-event", function(arg1, arg2, arg3){
    //do something
}, 10001); //ensure this callback is executed after other default subscriptions

Edit Events

The edit module has been decoupled from the validation modules, as a result several new evens have been added in this release

Edit Success

The edit-success event is a chain type event, used by the edit module to check if any other modules consider the attempted edit to be a failure

this.subscribe("edit-success", function(cell, value) => {
  //cell - cell component being edited
  //value - proposed new value

  return true;
});

Returningtrue will allow the edit to proceed, returning false with block the completion of the edit

Clearing Editor

The edit-editor-clear event is dispatched when the editor is being cleared after a success or cancel

this.subscribe("edit-editor-clear", function(cell, cancelled) => {
  //cell - cell component being edited
});

Edited State Reset

The edit-edited-clear event is dispatched when the edited state of a cell is being reset

this.subscribe("edit-editor-clear", function(cell, cancelled) => {
  //cell - cell component being edited
  //cancelled - true if the clear is caused because of an edit cancel

});

Footer Events

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

Footer Redrawn

The footer-redraw event is dispatched when the table footer is redrawn

this.subscribe("footer-redraw", function() => {
  //do something
});

Column Events

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

Column Renedered

The column-rendered event is dispatched when a column header is added to the DOM

this.subscribe("column-rendered", function(column) => {
    //column - internal column component for the rendered column  
});

Column Height

The column-height event is dispatched when the height of a column header is changed

this.subscribe("column-rendered", function(column) => {
    //column - internal column component for the column  
});

Cell Events

Cell Height

The cell-height event is dispatched when the height of a cell is changed

this.subscribe("cell-rendered", function(cell) => {
    //cell - internal cell component for the cell  
});

Bug Fixes

v5.2.0 Release

The following minor updates and bugfixes have been made:

• A console warning will be generated if Tabulator is instatiated on an empty table tag instead of a div
• The mouseLeave event now fires with the correct cell component
• Columns loading large amount of data while using frozen columns will no longer take a long time to load
• When adding or updating a column, recalculate frozen column positions so column is added in correct position

v5.2.1 Release

The following minor updates and bugfixes have been made:

• Fixed regression in date time and datetime sorters
• Fixed issue with column resize handles in tables with a fitColumns layout style causing horizontal scrollbars to appear

v5.2.2 Release

The following minor updates and bugfixes have been made:

• Further improved column resize handle styling for last column
• Fixed typo in ISO parsing in datetime sorter
• Fixed exception thrown from list editor when repeatedly switching between editors when used as a header filter

v5.2.3 Release

The following minor updates and bugfixes have been made:

• The renderStarted and renderCompete are now fired for render in place actions like sorting and filtering
• Fixed regression in Validation module, preventing the rowValidate and columnValidate functions from working correctly
• The persistance module will now automatically include column visibility persistence if the columns option is set to true
• Fixed issues on bootstrap 5 theme, with popups, menus and list editors having a transparent background
• Fixed visual corruption of rows outside of virtual render buffer when scrolling with frozen columns
• Grouped column moving has been correctly disabled to prevent visual corruption
• The scrollToRow functionality now correctly positions the row when there are variable height rows and the top position is used
• Child rows are now redrawn when the table.redraw(true) function is called

v5.2.4 Release

The following minor updates and bugfixes have been made:

• Grouped column calculations are now correctly updated when a data tree child row has a cell edited
• When using autoColumns and remote mode sorting or filtering, the columns will not be regenerated on a change in filter or sort, preventing an incorrect reset of the current sort/filter values
• Fixed context issue in the list editor
• Fixed regression in the resize columns module that was preventing resizing of frozen columns if there were more than one

v5.2.5 Release

The following minor updates and bugfixes have been made:

• Fix null comparison logic issues in modules
• Fixed file import issue in interaction module
• Fixed error in list editor when used as a headerFilter with the muliselect headerFilterParams option
• Fixed padding issue in bootstrap5 theme when used with table-sm class
• Fixed row styling issues in the bootstrap5 theme
• Fixed popup and list editor styling on bulma theme
• The aria-sort attribute on column headers is now set to the correct values
• Removed unneeded rowgroup aria tag from .tabulator-tableholder element
• Fixed regression in the scrollToRow function, preventing the bottom mode from working correctly
• Column header click and tap event bindings in the column definition are now correctly called only once
• Resize handles are no longer appended to the DOM for hidden columns
• Popups are now hidden when the table is destroyed

v5.2.6 Release

• Fixed regression in previous release that prevented column header sort arrows from being styled correctly

v5.2.7 Release

• Fix cell transparency issue in bootstrap 5 theme
• Fixed issue with popups persisting after table destruction if triggered at same time as destroy function call
• Fixed issue with list editor when in autocomplete mode, the enter key will now behave correctly as a submit action when clicked
• Fixed issue with list editor in multiselect mode where clicking into another editor would clear the current editor value.
• Fixed issue with the list editor where freetext values were not loading into the input when edit started

Version 5.1 Release Notes

Editor Config

a new .editorconfig file has been added to the Tabulator project to make it easier for developers to contribute to the project with correct indentation and other browser settings

File Importing

A new Import module has been added in this release to handle loading non JavaScript data types into the table

Import From Local File Demo

You can let the user choose a file from their local disk by using the import function. It will present the user with a standard file open dialog where they can then choose the file to load into the table.

The first argument of the function is the importer that will parse the file and convert it into an array of row data, this can either be a string representing one of the built in importers or a function for a custom importer. If this argument is missing, the import module will default to using the value of the importFormat option.

The second argument is the value for the accept attribute of the file input, and is used to restrict the files that the user can pick, this argument will accept any of the values valid for the accept field of an input element . If this argument is missing the user will be able to pick any file type in the file picker.

table.import("json", ".json")
.then(() => {
    //file successfully imported
})
.catch(() => {
    //something went wrong
})

The import function returns a promise that resolves when the data has been successfully loaded into the table

Import From Data

If you already have the formatted data from a file and don't need to present the user with the a file picker then you can use the importFormat option to tell Tabulator how to import data into the table when it is passed into the data option or the setData function.

The importFormat option can take any of the built in importers or a function for a custom importer.

Importing With Data Option

This can be used to import custom data when the table is loaded.

//define some CSV data
var csvData = `"Oli", "London", "23"
"Jim", "Mancheser", "53"`;

//define table
var table = new Tabulator("#example-table", {
    data:csvData,
    importFormat:"csv",
    columns:[...],
});

Importing With Data Option Using Auto Columns

With autoColumns enabled, you can build the table entirely from CSV data, as long as the first row of the data contains the column titles

//define some CSV data
var csvData = `"Name", "Location", "Age"
"Oli", "London", "23"
"Jim", "Mancheser", "53"`;

//define table
var table = new Tabulator("#example-table", {
    data:csvData,
    importFormat:"csv",
    autoColumns:true,
});

Calling the setData or import functions on a table with this setup will result in it parsing the column headers again from any future import

Importing With setData Function

This can be used to import custom data at any point after the table has loaded.

//define some CSV data
var csvData = `"Oli", "London", "23"
"Jim", "Mancheser", "53"`;

//define table
var table = new Tabulator("#example-table", {
    importFormat:"csv",
});

//load data at some point later
table.setData(csvData);

Built In Importers

Tabulator comes with a number of preconfigured importers, which are outlined below.

Note: For a guide to adding your own importers to this list, have a look at the Extending Tabulator section.

JSON

The json importer will load a JSON formatted file into the table.

table.import("json", ".json");

Data Format
The data must be stored as a valid json string matching the the structure of an array of objects as defined in the Load Data from Array section.

CSV

The csv importer will load a csv formatted file into the table.

table.import("csv", ".csv");

CSV files can contain a column title row, as long as the titles match the column titles the row will be safely ignored by Tabulator

As data contained in a CSV is arranged in simple columns, each column in the CSV will be loaded in order and matched to a column of a corresponding index in the table.

Data Format
The data must be stored as a valid csv format, with rows separated with a carriage returns and columns separated by commas.

Auto Columns
If the autoColumns option is enabled on the table, then the first row of the CSV data should be the column titles.

Custom Importers

As well as the built-in importers you can define a importer using a custom importer function.

The importer function accepts one argument, a string of the text content of the file being imported.

The function can return one of two options. An array of row objects as defined in the Load Data from Array section.

Or a two dimensional array of rows containing columns, this will then be used by Tabulator to infer the columns from their position in the array. If the autoColumns option is enabled on the table, then the first row of the array should be the column titles.

//define custom importer
function customJsonImporter(fileContents){
    return JSON.parse(fileContents);
}

//trigger import using custom importer
table.import(customJsonImporter, ".json");

File Readers

When loading a file using the import function, Tabulator reads in the file using a File Reader.

By default Tabulator will read in the file as plain text, which is the format used by all the built in importers. If you need to read the file data in a different format then you can use the importReader option to instruct the file reader to read in the file in a different format.

var table = new Tabulator("#example-table", {
    importReader:"buffer", //read imported file as buffer
});

The available readers are:

• text - Read file as plain text
• buffer - Read file as ArrayBuffer
• binary - Read file as raw binary in string format
• url - Read file as data url

Ajax

Real Time Ajax Parameters

You can now generate ajax parameters for each request by passing a callback to the ajaxParams option.

This function will be called every time a request is made and should return an object containing the request parameters.

var table = new Tabulator("#example-table", {
    ajaxURL:"http://www.getmydata.com/now", //ajax URL
    ajaxParams: function(){
        return {key1:"value1", key2:"value2"};
    }
});

Data Load Error Message Timeout

The dataLoaderErrorTimeout option has been added to allow configuration of how long and data load error message is displayed.

This option will accept an integer representing the number of milliseconds the message should be displayed for (default 3000 milliseconds).

var table = new Tabulator("#example-table", {
    ajaxURL:"http://www.getmydata.com/now", //ajax URL
    dataLoaderErrorTimeout:2000, //display error message for 2 seconds
});

Keybindings

The keybindings module has received a number of updates in this release.

Updated Keybindings

Keybindings that used to use the ctrl key, now also have a second binding that uses the meta key to improve usability on mac's

Multiple Key Combinations

It is now possible to bind multiple key combinations for a single action by passing an array of strings to its property:

var table = new Tabulator("#example-table", {
    keybindings:{
        "redo" : ["ctrl + 82", "meta + 82"], //bind redo function to ctrl + r or meta + r
    },
});

Keycode Lookups

If you are binding an action to an a - z key, then it is now possible to use the character itself and let Tabulator lookup the keycode for you:

var table = new Tabulator("#example-table", {
    keybindings:{
        "redo" : "ctrl + r", //bind redo function to ctrl + r
    },
});

Menus

The menu module has had an overhaul in this release, using the interaction manager to radically reduce the number of event listeners needed and to improve efficiency. It has also had several new features added.

Container Element

By default Tabulator will append the menu element to the body element of the DOM as this allows the menu to appear correctly in the vast majority of situations.

There are some circumstances where you may want the menu to be appended to a different element, such as the body of a modal, so that the menu is contained with that element.

In these circumstances you can use the menuContainer option to specify the element that the menu should be appended to.

var table = new Tabulator("#example-table", {
    menuContainer:"#modal-div", //append menu to this element
});

The menuContainer option can accept one of the following values:

• false - Append menu to the body element (default)
• true - Append menu to the table
• CSS selector string - A valid CSS selector string
• DOM node - A DOM Node

If Tabulator cannot find a matching element from the property, it will default to the document body element.

Container Position
Menu elements are positioned absolutely inside their container. For this reason you must make sure that your container has its position defined in CSS

Parent Element
The element you pass into the menuContainer option must be a parent of the table element or it will be ignored

Menu Events

New menu events have been added to help with tracking user interaction with menus.

Menu Opened

The menuOpened callback is triggered when a menu is opened.

table.on("menuOpened", function(component){
    //component - the component the menu has been opened on (could be cell, row or column depending on menu)
});

Menu Closed

The menuClosed callback is triggered when a menu is closed.

table.on("menuClosed", function(component){
    //component - the component the menu has been closed for (could be cell, row or column depending on menu)
});

Pagination

Pagination Counter

You can now choose to display a pagination counter in the bottom left of the footer that shows a summary of the current number of rows shown out of the total.

To enable this you need to set the paginationCounter option in the table constructor.

var table = new Tabulator("#example-table", {
    pagination:true,
    paginationCounter:"rows", //add pagination row counter
});

Built In Counters

Tabulator comes with a couple of built in counters that format the page counter differently for different needs

The paginationCounter option can take one of two built in string values:

• rows - displays a summary of the currently displayed rows in the format "Showing X-X of X rows"
• pages - displays a summary of the currently displayed pages in the format "Showing X of X pages"

Note: For a guide to adding your own counters to this list, have a look at the Extending Tabulator section.

Custom Counters

If you want to have a fully customized counter, then you can pass a function to the paginationCounter option

The formatter function accepts 5 arguments:

• pageSize - Number of rows shown per page
• currentRow - First visible row position
• currentPage - Current page
• totalRows - Total rows in table
• totalPages - Total pages in table

The function must return the contents of the counter, either the text value of the counter, valid HTML or a DOM node

var table = new Tabulator("#example-table", {
    pagination:true,
    paginationCounter:function(pageSize, currentRow, currentPage, totalRows, totalPages){
        return "Showing " pageSize +  " rows of " + totalRows + " total";
    }
});

Counter Element

By default the counter will be displayed in the left of the table footer. If you would like it displayed in another element pass a DOM node or a CSS selector for that element to the paginationCounterElement option.

var table = new Tabulator("#example-table", {
    pagination:true,
    paginationCounter:"rows",
    paginationCounterElement:"#page-count", // show counter in this element instead of footer
});

Ajax Total Row Counting

When working with remote ajax pagination the table does not know how exactly how many total rows are available, because it only loads one page of row data at a time.

If you are using remote pagination with a counter then you need to include the last_row value in your response data that is set to the total number of rows available

{
    "last_page":15, //the total number of available pages (this value must be greater than 0)
    "last_row":246, //the total number of rows pages (this value must be greater than 0)
    "data":[ // an array of row data objects
        {id:1, name:"bob", age:"23"}, //example row data object
    ]
}

If your remote response is missing the last_row value then Tabulator will attempt to estimate the number of rows by multiplying the page size by the last_page value

Localization of Counters

You can customise the text of the built in counters using the counters pagination property in the lang module

var table = new Tabulator("#example-table", {
    locale:true,
    langs:{
        "default":{
            "pagination":{
                "counter":{
                    "showing": "Showing",
                    "of": "of",
                    "rows": "rows",
                    "pages": "pages",
                }
            },
        }
    },
});

For full details on how to adjust localization, please read the localization module docs

Columns

Max Initial Width

The maxInitialWidth column definition option can be used to set the max width of a column when the table is initially rendered, in pixels.

The user can then resize the column larger than this up to the maxWidth limi, if set

{title:"Name", field:"name", initialMaxWidth:100, maxWidth:200} //allow the column to reach a max of 100px wide when initially rendered but allow the user to resize it up to 200px

Movable Rows

New Events

A couple of new external events have been added to help track row movement

Row Move Started

The rowMoving event will be triggered when a row has started to be dragged.

table.on("rowMoving", function(row){
    //row - row component
});

Row Move Cancelled

The rowMoveCancelled event will be triggered when a row has been moved but has not changed position in the table.

table.on("rowMoveCancelled", function(row){
    //row - row component
});

Sorting

Date Time Sorting

The date, time and datetime sorters have been update to parse ISO date formats.

You can enable ISO format support by passing a value of "iso" to the format property of the sorterParams object:

{title:"Example", field:"example", sorter:"datetime", sorterParams:{
    format:"iso",
}}

Formatting

Date Time Formatting

The datetime and datetimediff sorters have been update to parse ISO date formats.

You can enable ISO format support by passing a value of "iso" to the inputFormat property of the formatterParams object:

{title:"Example", field:"example", formatter:"datetime", formatterParams:{
    inputFormat:"iso",
}}

Data Trees

Row Component Functions

functions have been added to the row component to allow querying of a rows tree state.

Check If Tree Expanded

The isTreeExpanded function will return true if the row is expanded and showing its children and false if it is collapsed.

var expanded = row.isTreeExpanded();

Downloads

JSON Downloader

The json formatter now supports using the titleDownload column definition to set the name of the field in the json output

{title:"Name", field:"name", titleDownload:"Persons Name"}

Example json output:

[
    {
        "age":22,
        "color":"red",
        "Persons Name":"steve"
    }
]

JSON Lines Downloader

The new jsonLines downloader will format data as a series of JSON encoded row objects separated by carriage returns.

This format is commonly used in conjunction with Apache Spark, Hadoop and Hive.

Bug Fixes

v5.1.0 Release

The following minor updates and bugfixes have been made:

• Row resizing no longer triggers a console error
• Fixed issue with exception thrown when using cell navigation functionality or tabEndNewRow option
• Interaction monitoring of group header tap events is now correctly handled through the interaction module
• Improved stability of horizontal virtual DOM
• Fixed issue with cellEdited callback not being triggered in a cells column definition
• Fixed missing pagination buttons in materialize theme
• Highlighting of selected rows now works correctly with materialize theme
• Row initialization flag is now set before rowFormatter is called
• Use strict comparison to handle cell data change check to allow changing between falsey values
• Fixed typo in internal data-refreshed event name
• The basic vertical renderer now clears dow rows before attempting to re-render them to prevent corruption of row layout
• Console warning added to the interaction manager to warn developers when trying to listen to events on an incorrectly reinitialized table
• Mock cell component is now correctly passed to headerFilterParams callback
• Fixed regressions in the Validate module
• GroupRows module now configures itself after the tables columns have been set to ensure rows are grouped correctly on load
• Fixed issue with redraw loop when browser zoom is not 100%
• rowMouseOver events no longer throw an error when the mouse moves over a frozen row
• Fixed layout issue with column header sort arrows when table is in RTL mode

v5.1.1 Release

The following minor updates and bugfixes have been made:

• Removed unnecessary console logging.
• Fixed issue with GroupComponent function bindings
• Fixed issue with progressive scroll attempting to load data beyond final page when initializing if all data has been loaded and the table viewport is still not full.
• Fixed double firing of internal row-added event.
• Adding rows to the table when using column calculations and data trees no longer throws an exception
• The getRows function no longer returns calc rows when passed the visible argument
• The value of a the currently edited cell is now saved before creation of a new row when using tabEndNewRow
• Fix error with getParentColumn function always returning false
• Collapsed data is now correctly shown when responsiveLayout is set to collapse and the responsiveLayout formatter is in use
• Interaction events in nested tables no longer trigger console errors
• Fixed footer layout issues when using pagination and bottom calculations
• Sorting of data should no longer alter table vertical scroll position
• Fixed typo in data-refreshing internal event name
• The placeholder text now remains horizontally centered in the table viewport at all times, and the text wraps if it does not fit in the available space

v5.1.2 Release

The following minor updates and bugfixes have been made:

• Fixed issue with placeholder text not clearing after ajax load after table has been resized
• The paginationAddRow option now works correctly when set to a value of table
• Added module initialization order prop to allow modules to initialize in the correct order
• Restoed functionality to the sort, filter and page persistence modes
• Column headers with no title are now correctly rendered as empty in the print output
• The rownum formatter will only display a value in rows in the table, not in calc rows etc
• When using responsiveCollapse column header titles are now displayed as HTML rather than plain text

v5.1.3 Release

The following minor updates and bugfixes have been made:

• Fix issue with column group headers triggering a console error when redrawn in classic render mode
• Fixed issue with double initialization of FooterManager
• Fixed regression in last release, preventing use of the footerElement option while pagination is enabled
• Replaced use of deprecated substr functionality with slice
• Improved webpack tree shaking config to prevent removal of stylesheets
• Added new layout-refreshing internal event to allow tracking of layout process
• Fixed multiple calls of frozen columns module layout function when redrawing table
• Using a combination of fitDataFill layout mode and a frozen right column, no longer displays an unneeded horizontal scroll bar
• The rowSelection formatter will now correctly handle uses of the ctrl and shift keys when the selectableRangeMode option is set to click
• Fixed column calculation issue when groupBy, dataTree, dataTreeStartExpanded and dataTreeChildColumnCalcs options used together.
• The columnResized event is now only fired if the width of a column actually changes, simply clicking on the resize handle without moving will not fire the event.
• When a column is resized to fit its data by double clicking on the resize handle, the columnResized event is now triggered after the recalculation of the columns width

v5.1.4 Release

The following minor updates and bugfixes have been made:

• Fixed layout issue with external footer elements since last update
• Fixed issue with pagination page buttons not displaying in footer when bottom column calculations are in use
• The rows page counter now correctly handles empty tables
• added an aria-label to the checkbox in the rowSelection formatter
• Fixed console error when using groupContextMenu option
• When exporting a table to HTML, the cell styles will now be cloned from the matching column and include text alignment
• The data option only has its references cleared if it is a type of array
• The rowSelectionChanged event is no longer triggered if table selection is cleared when no rows are selected
• Row internal initialization state is now set before the horizontal renderer is triggered
• Horizontal virtual dom now correctly calculates column widths when in fitData layout mode
• Focusing in a header filter when scrolled to the far right of the table will no longer break alter the horizontal scroll position of the table
• Improve efficiency of frozen column calculations

v5.1.5 Release

The following minor updates and bugfixes have been made:

• The horizontal virtual dom renderer now correctly handles fitDataFill and fitDataStretch layout modes
• The horizontal virtual dom renderer now has an adaptive buffer window to allow columns of any size to render correctly, this prevents columns with a width wider than the table from corrupting the table view
• Pagination counters now receive the number of actual data rows on display, it now excludes group and column calc rows.

v5.1.6 Release

The following minor updates and bugfixes have been made:

• Improved menu positioning when overflowing on statically positioned body element
• Fixed issue with horizontal virtual renderer headers breaking alignment when table scrolled fast right then slowly left
• Efficiency improvements to the horizontal virtual renderer

v5.1.7 Release

The following minor updates and bugfixes have been made:

• Ensure horizontal virtual dom renderer visible row cache is cleared on data

v5.1.8 Release

The following minor updates and bugfixes have been made:

• Menus are now correctly dismissed when editing starts on a cell
• Fixed error message in component binder when attempting to load properties on a component
• Build tools version bumped
• Select editor now reshows list when cleared

Version 5.0 Release Notes

Codebase Rebuild

With the release of version 5.0 Tabulator has undergone a complete rebuild of the codebase.

As Tabulator has grown in complexity and size, so has its codebase, making it harder to maintain and test and very big to download. In this release all of these issues have been addressed.

This release also aims to make Tabulator more accessible to developers, opening up the code and making it easier for you to build your own modules for the table.

Codebase Restructure

While the rest of the release notes will go over the practical implications of the updates in this release, this section will take you through some of the behind the scenes changes that have occurred.

Class Structures

To make the codebase easier to maintain it has been broken down in to much smaller files, and switched from the old prototypical design paradigm to using the cleaner ES6 Class structure.

ESM Importing

Tabulator has moved to using ESM importing of the library as standard (don't worry, the UMD require functionality is still available if needed), and by default will now only import the minimal core library, that provides basic table layout functionality. You can then import only the modules that you actually need to use to run your table.

This has significantly reduced the size of the library when it is imported, as well as reducing the loading and render time of the table as there are less modules to initialize.

For developers looking for a quick setup, there is still an option for importing a complete version of Tabulator with all the modules pre loaded.

Communication & Event Bus

Communication throughout the table is now managed through a central event bus that decouples each area of the system from each other, to help isolate code, improve testing and increase communication efficiency.

A second event bus now manages all external communication outside of the table, with old style callbacks on the table now being replaced with events that you can subscribe to.

Module Isolation

One of the big drives of this update has been to make it simple for anyone to create their own module to extend Tabulator and add any missing functionality they may like. As a result of this there is now a guide on creating your own modules, and in the next couple of months you will be able to show case your own modules on the Tabulator site.

To aid this, modules have been completely restructured to totally isolate their functionality from each other and the rest of the table. This has improved module reliability, simplifying the development process and improving testability.

As part of this release all modules have been isolated from Tabulators core logic, but the work of isolating the existing modules from one another will happen in stages over the next few releases due to the scale of the challenge with the legacy code base.

Modules are now also responsible for registering any options, callbacks or events that they use on the table, components or column definitions, allowing developers to easily build in user configurable custom functionality.

Modules now include a range of built-in helper function that allow safe interactions with the rest of the table and other modules.

Data Loader

A central data loader now manages all data as it is loaded into the table, this handles all local data, as well as triggering events on the internal event bus that allow modules to subscribe and provide data from remote sources such as ajax and databases.

The result of this is that the Ajax module is no longer responsible for loading remote data into the table, it is simply responsible for making ajax requests when triggered by a data load event. this means it is now easy to build your own custom remote data loading module and add it to the table.

Data Management Pipeline

The data and row management pipelines have been overhauled to allow modules to register themselves as a pipeline state, allowing modules to directly alter the rows displaying in the table as they are rendered

Event Listeners

A new interaction manager has been added to the core of Tabulator that listens to all standard table events (click, tap, mouse etc) through the main table element and then links these back to the relevant components for processing. This has resulted in a dramatic reduction memory usage and processing time as the whole table only runs off of a handful of event listeners rather than the 1000's it used to.

Table Renderers

Renderers (eg virtual DOM / basic) have been separated from the row management logic to make managing the render of the table simpler and more extensible.

The table renderers have been optimized to reduce redrawing during scroll, improving table load times and scroll efficiency, resulting in a smoother experience for end users.

Class Structures

All code has now been migrated to use the ES6 class structure to improve the readability of the code.

The codebase has also been broken down into considerably smaller files to improve readability and maintainability.

File Structure

The directory structure of the sources has been updated to make the role of each of the files clearer:

• /src - The source files for Tabulator, make your changes in this directory
  • /js - This folder contains the JS source. The core files are in the root of this folder
    • /builds - Build files that structure each of the different types of dist file
      • esm.js - Builder for the tabulator_esm.js file
      • umd.js - Builder for the tabulator.js file
      • polyfill.js - Compatibility polyfills for IE11
      • jquery_wrapper.js - JQuery wrapper
    • /core - Source files for the core Tabulator framework
      • /renderers - Built-in vertical and horizontal renderers
      • /tools - Core tools used throughout the system
    • /modules - Sources files for each of the modules
  • /scss - The source scss files for the CSS style sheets, this folder contains one file per theme. for themes based on other frameworks like bootstrap there is a folder that contains the tabulator stylesheet and a variables file containing the SCSS from the other framework
• /dist - All files contained in this folder are automatically generated by rollup

Build Tools

Module Builder

Tabulator has switched to using the Rollup Module Builder as its packaging solution.

Build Commands

The npm build commands have been improved to give more control over the development experience:

Regenerate the contents of the /dist folder

npm run build

Watch for changes in the source and regenerate the contents of the /dist folder (ESM and CSS files)

npm run dev

Watch for changes in the SCSS and regenerate only the CSS files

npm run dev:css

Watch for changes in the JavaScript and regenerate only the tabulator_esm.js file

npm run dev:esm

Watch for changes in the JavaScript and regenerate only the tabulator.js file

npm run dev:umd

Styling and Themes

Theme Extensions

The SCSS files for themes have been rewritten to import the base SCSS stylsheet for Tabulator and then extend any parts needed for that theme, making it easier to maintain the core table styling.

The package.json file has been updated to make it easier to import the default CSS into your project

@import  "tabulator-tables";

Theme Files

All themes have been moved into the root of the /dist/css/ folder and now include minified versions and source maps.

Some theme files have been renamed to improve naming consistency.

You still only need to pull in the one theme CSS file when importing Tabulator into your project

Class Naming

To improve consistency, all class names have been updated to kebab case, meaning the table-tableHolder is now table-tableholder

Prototype Functions

All functions that used to be accessible through the prototype are now accessible directly from the Tabulator class

Default Options

Default options can now be set on the defaultOptions object directly on the Tabulator class:

Tabulator.defaultOptions.movableRows = true;
Tabulator.defaultOptions.layout = "fitColumns";

Extending Modules

Modules can now be extended by calling the extendModule function directly on the Tabulator class

Tabulator.extendModule("format", "formatters", {
  bold:function(cell, formatterParams){}
});

Finding Tables

You can find tables by calling the extendModule function directly on the Tabulator class

var table = Tabulator.findTable("#example-table")[0]; // find table object for table with id of example-table

Deprecated Code

All 4.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

Installing Tabulator

Importing The Library

Tabulator has now moved to using ESM modular imports, so must now be included into projects using the import directive.

import {Tabulator} from 'tabulator-tables';

Core With Optional Modules

As Tabulator has grown to include 100's of features, so has its codebase, meaning that even simple tables used to mean including 500kb of library in their site.

To allow Tabulator to grow without rapidly increasing file sizes, the library has been broken down into a series of optional modules.

You now import the core Tabulator class, that includes the minimal JavaScript needed to build the table, you then import only the modules that you need to add functionality 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
});

A full list of modules can be found in the Modules Documentation

Full Library

If you would prefer to include the whole Tabulator library in your project, complete with all the built-in modules, you can instead import TabulatorFull, this will pre-register all modules.

import {TabulatorFull as Tabulator} from 'tabulator-tables';

Initialization

Tabulator has now moved to an asynchronous initialization process.

This allows a consistent initialization experience between async and synchronous data sources, and allows binding of the new events system to the table before initialization is completed, to catch things like the tableBuilt event.

As a result of this it is no longer possible to call functions that change the setut of the table such as setData and setColumns straight after the table constructor.

In the first instance you should use the data and columns options to set these in the table constructor

var table = new Tabulator("#example-table", {
  data:[],
  columns:[],
});

But if you do need to call them straight after table initialization for whatever reason, you should call them after the tableBuilt event, which indicates the table has been initialized and is ready to be updated

//Initialize Table
var table = new Tabulator("#example-table", {
  //table setup options
});

//update columns after it is built
table.on("tableBuilt", function(){
  table.setColumns(columns);
});

Dependencies

As before, the Tabulator core remains free of any dependencies. As part of this release module functionality that was dependent on 3rd party libraries has been updated to use the latest versions of those libraries.

Luxon

In previous version of the library Tabulator used the moment.js library for date and time manipulation. In this release this has now been replaced with the much more compact luxon.js library.

JS PDF

The PDF downloader now uses the latest version of the jspdf library to generate its PDF file.

Developer Tools

A major aim of this update is to make Tabulator more accessible to developers, to give you the tools you need to modify and enhance the table, and to contribute to the library.

There is now a range of debug options built into Tabulator that will console log various table actions so you can see how your code is affecting table functionality.

You will notice the new Development Concepts section at the bottom of the menu sidebar. This contains a range of documentation aimed at helping developers understand more about the internal workings of Tabulator.

Invalid Options Warning

Enabled by default this will provide a console warning if you are trying to set an option on the table that does not exist. With the new optional modular structure this is particularly valuable as it will prompt you if you are trying to use an option for a module that has not been installed.

You can disable this using the debugInvalidOptions option in the table constructor:

var table = new Tabulator("#example-table", {
  debugInvalidOptions:false, //disable option warnings
});

Monitor External Event Bus

The debugEventsExternal option will create a console log for every external event that is fired so you can gain an understanding of which events you should be binding to.

var table = new Tabulator("#example-table", {
  debugEventsExternal:true, //console log external events
});

Passing an array of event keys into this option will restrict the console logging to just the events you want to see.

var table = new Tabulator("#example-table", {
  debugEventsExternal:["dataLoading", "dataLoaded"],
});

Monitor Internal Event Bus

The debugEventsInternal option will create a console log for every internal event that is fired so you can gain an understanding of which events you should be subscribing to in your modules.

var table = new Tabulator("#example-table", {
  debugEventsInternal:true, //console log internal events
});

Passing an array of event keys into this option will restrict the console logging to just the events you want to see.

var table = new Tabulator("#example-table", {
  debugEventsInternal:["data-loading", "data-loaded"],
});

Warning Tabulator fires a large amount of internal events, running with this enabled will slow the table down considerably. You should ensure you are only running this option with a table containing a small amount of data

Module Building

As mentioned above, one of the main focuses of this release has been to put you, the developer, in control of Tabulator. To this end the module functionality has had a complete overhaul to make it easier than ever to build your own custom modules.

Module Classes And Helpers

There is now a new Module base class, that is packed full of helper functions to make it easier than ever to access internal table functionality in a clean, safe and decoupled way.

The Module Building Documentation contains a detailed guide of how to setup and register a new module with Tabulator as well as a detailed run through of each of the helper functions built into the Module base class.

Example Modules

Building out your own module can be a bit daunting at first, with so many options it can be hard to know where to start.

To help with this there is now Module Examples Page that contains a series of step by step guides to building out practical and functional modules.

Internal Events

Tabulator now uses an internal event bus to handle communication between modules and the Tabulator core, and help keep Tabulators internal logic isolated from module logic.

The Internal Event Bus Documentation contains a detailed list of all the built-in internal events, along with a guide on how to dispatch and subscribe to them.

Renderers

Renderers have now been separated out from the core table logic into classes of their own that implement a standard interface.

This will make it easier to maintain each module and make it much easier for other developers to contribute updates to the core rendering systems and even build whole new renderers to meet different needs.

Classic Renderer Rename
The old classic renderer has been renamed to "basic" to make it clearer that it is a simple renderer compared to the virtual option.

Defining Renderers

Now that renderers have been separated, there is no longer a virtualDom option for turning on/off the virtual DOM. Instead there are now two options tht can be used to set the renderer for the horizontal rows and horizontal columns.

Vertical Renderers

The vertical renderer can now be set using the renderVertical option:

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

This option can be one of two built in renderers:

• virtual (default) - the virtual renderer that uses virtual DOM techniques to render only the visible area of the table
• basic - renders all rows at once

Horizontal Renderers

The horizontal renderer can now be set using the renderHorizontal option:

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

This option can be one of two built in renderers:

• virtual - the virtual renderer that uses virtual DOM techniques to render only the visible area of the table
• basic (default) - renders all columns at once

Custom Renderers

It is now also possible to build out your own custom renderer by extending the Renderer class and passing it into either the renderVerticalrenderHorizontal options

import {Tabulator, Renderer} from 'tabulator-tables';

//define renderer
class CustomRenderer extends Renderer{
  //build out your renderer
}

//define table
var table = new Tabulator("#example-table", {
  renderVertical:CustomRenderer,
});

For full details on how to build your own custom renderer, checkout the Rederer Documentation

If you make any optimizations to existing renderers or create your own renderer that you would like to see included with Tabulator, feel free to Submit a pull request

Data Loading

The data loading system has had a complete overhaul in this release. As part of this the Ajax module is no longer center stage for remotely loading data into the table. There are now a series of internal events that you can to subscribe to with any custom module that will allow you to easily integrate with any other data sources.

To reflect this, a number of table options have been changed/updated to remove their links to the ajax system and make them more generically about the source of the data.

Loading Events

The old ajax loading events have been removed from the ajax module and are now generic loading events that are called whenever data is being loaded into the table.

The existing dataLoading events have been moved into the new system and now specifically refer to the process or retrieving data and loading it into the table, the dataLoaded event is now called when data has been retrieved successfully but before it is processed into the table

Data Loading

The dataLoading event is triggered whenever new data is loaded into the table.

table.on("dataLoading", function(data){
  //data - the data loading into the table
});

Data Loaded

The dataLoaded event is triggered when a new set of data is loaded into the table, but before it is processed.

table.on("dataLoaded", function(data){
  //data - all data loaded into the table
});

Data Load Error

The dataLoadError event is triggered there is an error response to a load request. This event is passed the Fetch Response Object as its first argument, which allows access to the response content, status code, etc.

table.on("dataLoadError", function(error){
  //error - the returned error object
});

Processing Events

There are now two new events for data processing, this step happens after the data is loaded into the table and covers the period where the data is processed and rendered

Data Processing

The dataProcessing event is triggered after data is loaded into the table, just as it starts being processed into rows and cells.

table.on("dataProcessing", function(){});

Data Processed

The dataProcessed event is triggered after data has been processed and the table has been rendered.

table.on("dataProcessed", function(){});

Loaders

Now that the ajax module is no longer in charge of remote data loading, the loading elements displayed during remote data loading have had their options changed to reflect their new position

Data Loader

You can disable the remote data loading message using the dataLoader option

var table = new Tabulator("#example-table", {
  dataLoader:false, //disable data loader message
});

Data Loading

You can set the contents of the data loader message element using the dataLoaderLoading option

var table = new Tabulator("#example-table", {
  dataLoaderLoading:"Data Loading",
});

Data Error

You can set the contents of the data loader error message element using the dataLoaderError option

var table = new Tabulator("#example-table", {
  dataLoaderError:"Error Loading Data",
});

Localization Mappings

With the moving of the loaders out of the ajax module, their corresponding localization mappings have also changed

var table = new Tabulator("#example-table", {
  locale:true,
  langs:{
    "en-gb":{
      "data":{
        "loading":"Loading", //data loader text
        "error":"Error", //data error text
      },
    }
  },
});

Request Modes

In previous version of Tabulator there where various options that enable ajax interactions by certain modules, such as the ajaxSorting option. Now that the ajax module is no longer the source of all remote data for the table these options have been removed and replaced with "mode" options that let you set a a mode of operation for the modules.

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

The mode property takes a text string that by default can have one of two values:

• local - perform action on local data in table (default)
• remote - do not perform an action in table, instead add params to remote data request

In practice, each module looks at its mode option when an action triggers a change and then decides how to handle it. By making this a text option it means you can now extend module mode functionality, adding other request modes for them to handle.

Sort Mode

You can set the mode of the sort module using the sortMode option in the table constructor

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

Filter Mode

You can set the mode of the filter module using the filterMode option in the table constructor

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

Page Mode

The page module, worked slightly differently in the past and already used a mode passed into the pagination option to enable pagination. In this release the pagination option is now a boolean that enables pagination and the paginationMode option sets its mode

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

Request & Response Params Mapping

The paginationDataSent and paginationDataReceived options that were used to map the parameters of incoming and outgoing request parameters have been moved out of the pagination module and incorporated into the data loader. As such their names have now been changed.

var table = new Tabulator("#example-table", {
  dataSendParams:{
    page:"current_page",
    size:"page_size",
  },
  dataReceiveParams:{
    last_page:"last",
    size:"page_data",
  }
});

Progressive Loading

Now that ajax functionality has been isolated from data loading the progressive load functionality has been move out of the ajax module.

As a result of this all progressive load table options have now changed name to remove the "ajax" prefix

var table = new Tabulator("#example-table", {
  progressiveLoad:"scroll",
  progressiveLoadDelay:400,
  progressiveLoadScrollMargin:300,
});

Columns

Default Column Definition Options

If you want to set the same property in every column on your table, you can use the columnDefaults option. Setting the value in this object will result in it being applied to every column in the table. You can set any Column Definition Options in this object and they will apply to all columns.

If a column needs to override the default value, then simply define the property in that columns definition object and the default will be ignored.

var table = new Tabulator("#example-table", {
  columnDefaults:{
    width:200, //set the width on all columns to 200px
  },
  columns:[
    {title:"Name", field:"name"},
    {title:"Age", field:"age"},
    {title:"Address", field:"address", width:300}, //override the column default and set this column to 300px wide
  ],
});

Old Default Column Values Removed

As a result of the new columnDefaults option, a number of table options that used to configure all rows have become redundant. Checkout the Upgrade Guide for a list of what has changed.

Rows

Get Cells Functionality

Cell components are now generated as needed by each row, meaning that as of this release the getCells and getCell functions on the row component will now work even if the row has not yet been initialized.

Events

Tabulator has moved from a callback model for events, where you would register a callback in the constructor for each event, to an event subscription model where you subscribe to each event after the table is built.

This approach has several advantages, allowing you to register multiple subscribers to any event and to unsubscribe from events at any point.

A full list of the callbacks that have been switched over to events can be found in the Upgrade Guide

Events vs Callbacks

As of version 5.0 there is now a difference in functionality between events and callbacks, with each having different purpose.

Events

Events are simple notifications that can be subscribed/unsubscribe from once the table has been initialized. they offer one way notifications that the state of the table has changed.

For a full list of available events, checkout the Events Documentation

Callbacks

Callbacks are defined in the table constructor and allow alteration of the tables fuctionality as it runs. As such they often require a return value from the function.

The one exception to this rule is cell/column header events which can also be registered as callbacks in the column definition. This functionality has been left in as it allows greater flexibility in binding events to specific columns.

For a full list of available callbacks, checkout the Callbacks Documentation

Subscribe To Events

You can subscribe to events by calling the on function on the table and passing in the name of the event and the function you wish to be triggered by the event.

var table = new Tabulator("#example-table", {
  //setup your table
});

//subscribe to event
table.on("dataProcessed", function(data){
  //data has been processed and the table rendered
});

Unsubscribe From Events

Unsubscribe All Listeners

To unsubscribe all listeners for a given event call the off function passing in the name of the event.

table.off("dataProcessed")

Unsubscribe One Listener

To a specific listener for a given event call the off function passing in the name of the event and the function that you previously subscribed too.

var dataProcessedEvent = function(data){
  //data has been loaded
}

//subscribe to event
table.on("dataProcessed", dataProcessedEvent);

//unsubscribe from event
table.off("dataProcessed", dataProcessedEvent);

Column Definition Event Callbacks

To aid in targeting individual columns with events, the event callbacks in column definitions are remaining as they were.

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

New & Updated Events

A number of new events have also been exposed at the table level. The section below out lines the changes, for a full list of available events, checkout the Events Documentation

Mouse Events

Mouse over events have now been added for the column headers and group headers to bring them into line with the cell and row mouse events

User Interaction

A new interaction manager has been added to the core of Tabulator that listens to all standard table events (click, tap, mouse etc) through the main table element and then links these back to the relevant components for processing. This has resulted in a dramatic reduction in memory usage and processing time as the whole table only runs off of a handful of event listeners rather than the 1000's it used to.

To partner up with this, a new interaction module has been introduced, that ties into the interaction manager to produce the table events for click, tap and mouse events. For example:

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

Event Propagation

As a result of the way that the interaction manager has been built, events now propagate up the table before the external events are triggered. Which means that cell click events, especially while editing, now also propagate up to the row that contains the cell.

Formatters

Datetime

In previous version of the library Tabulator used the moment.js library for date and time formatting. In this release this has now been replaced with the much more compact luxon.js library. While offering broadly the same functionality, there has been some update to the formatterParams format properties.

Date Time Difference

In previous version of the library Tabulator used the moment.js library for date difference formatting. In this release this has now been replaced with the much more compact luxon.js library. While offering broadly the same functionality, there has been some update to the formatterParams format properties.

Downloaders

PDF Downloader

The PDF downloader now uses the latest version of the jspdf library to generate its PDF file.

Sorting

Date

In previous version of the library Tabulator used the moment.js library for date sorting. In this release this has now been replaced with the much more compact luxon.js library. While offering broadly the same functionality, there has been some update to the sorterParams format properties

Time

In previous version of the library Tabulator used the moment.js library for date sorting. In this release this has now been replaced with the much more compact luxon.js library. While offering broadly the same functionality, there has been some update to the sorterParams format properties

Datetime

In previous version of the library Tabulator used the moment.js library for date and time sorting. In this release this has now been replaced with the much more compact luxon.js library. While offering broadly the same functionality, there has been some update to the sorterParams format properties

Internet Explorer

As microsoft has now declared that Internet Explorer will be reaching End of Life next year, Tabulator will no longer be supporting the browser from version 5.0 onwards.

If you wish to continue using Tabulator on IE, then please stick to using the Tabulator 4.x releases.

Bug Fixes

v5.0.0 Release

As part of the rebuild most of the Tabulator codebase has been rewritten resulting in a large number of bugs being fixed along the way, check the git issues list for more details.

v5.0.1 Release

The following minor updates and bugfixes have been made:

• Fix issue preventing ESM imports of individual modules
• Prevent unnecessary console warnings and errors when other frameworks try to access component objects with invalid properties
• Warn user if they try and set data with the setData function before the table has been initialized
• Updated build tools dependencies

v5.0.2 Release

The following minor updates and bugfixes have been made:

• Fixed issue with tableBuilt event being fired before the initial table data had been loaded
• Fixed issue with footerElement option not accepting HTML string inputs correctly
• Fixed issue with page size selector being created before the initial page size is set
• Fixed issue with persistence module not initializing correctly when the autoColumns option was set
• Restored functionality to the extendModule function
• Row height on variable height columns is now correctly recalculated on table size change
• Updated build tools dependencies

v5.0.3 Release

The following minor updates and bugfixes have been made:

• Fixed scope issue in the Accessor Module
• Ensured that the this context of event callbacks is set to the table that called them
• The row data array is now correctly passed to the dataLoaded callback when triggered by an ajax request
• A warning console message is now displayed when setColumns is called before the table is initialized
• A scoping issue has been fixed in the Reactive Data module
• The bootstrap 4 theme has been updated to prevent graphical collision of even rows when frozen columns are enabled
• Header filters are now correctly applied when grouped rows are in use
• Added the mock deinitializeHeight function to the Group class to prevent rendering errors
• Updated the deepClone helper function to prevent an infinite loop when recursive data structures are used

v5.0.4 Release

The following minor updates and bugfixes have been made:

• Fixed regression in deepClone helper function and optimized it to handle complex objects

v5.0.5 Release

The following minor updates and bugfixes have been made:

• Fixed missing reference to helper function in edit module
• Fixed context regression in ajax module
• Moved table element parsing into core table initialization logic, to allow HTML import module to initialize in the correct order
• Prevented progress formatter from throwing an error when used as a header filter
• Ensure that header filters that return no matches clear down the table
• Ensure column header height is always recalculated on redraw
• Fixed stripped row styling issues in bootstrap3, semanticui and bulma themes
• The addRow function, when used in conjunction with the group rows module now correctly adds rows to their matching group
• The onRendered function is now correctly called in a `columnTitleFormatter` when the row is inserted after initialization
• Accessibility attributes for table headers have been improved to make them more intelligible to screen readers
• The onRendered function is now correctly triggered when cell values are updated by the undo or redo actions
• Mock onRendered function is passed into responsive collapse formatters to prevent exception when collapsing heavily formatted columns
• Widths and margins of group calculation rows are now correctly recalculated on table initialization
• The data tree module will now only reinitialize a row if the element cell is edited, rather than reinitializing the whole row
• The edit module now correctly calls navigation functions on the cell component instead of the cell itself

v5.0.6 Release

The following minor updates and bugfixes have been made:

• Fix ESM import bug in HTML Import module when processed for minified UMD dist file
• Improve formatting of negative values in money formatter

v5.0.7 Release

The following minor updates and bugfixes have been made:

• Added console warnings on functions that are unsafe to call on an uninitialized table
• Moving columns while a row is frozen now works correctly
• History module now handles row deletion correctly
• Fix issue with duplicated row groups when the setGroupBy function is called
• The addColumnfunction now correctly adds all new columns as top level columns when column grouping is in use
• Initial filters no longer try to refresh the table when it is uninitialized
• The select module now correctly handles row-retrieve internal events

v5.0.8 Release

The following minor updates and bugfixes have been made:

• Table now correctly maintains horizontal scroll position when header sort is triggered
• Table now correctly maintains horizontal scroll position when header filter is triggered
• Rows are now detatched from groups when table is wiped, preventing console error messaging
• The movableColumns table option now correctly respects its default value
• Luxon based formatters now cast values to strings to allow correct format processing without errors
• Luxon based sorters now cast values to strings to allow correct format processing without errors
• Selectable Row persistence on sort/filter is now correctly enabled by default
• The interaction monitor now correctly handles mouse events on the table when the table is created from an HTML table element
• The GroupRow module now reinitializes when the setGroupBy function is called
• Column header hr tags are now correctly parsed for tabulator- prefixed attributes when loading table from HTML table element
• Exception no longer thrown when calling updateRow function
• Option chaining has been removed from the code base to improve ESM importing for older environments
• 'CalcCompononet' is now correctly bound to row component so functions like getData can now be successfully called on it
• Ajax progressive loading in scroll mode no longer throws a console error when the table has been scrolled to the last page
• An unneeded initialisation warning has been removed from the getRows function

v5.0.9 Release

The following minor updates and bugfixes have been made:

• Column header tooltip no longer defaults to tooltip option if headerTooltip not set
• Fixed issue with params specified in the setData function not being passed to a request if ajaxParams option not set
• Fixed margin issues with data tree elements on redraw
• Data tree module now waits for columns to be loaded into the table before calculating the first column
• Data tree elements are now correctly regenerated when a cell value is changed
• The interaction monitor now correctly clears event listeners when the table is destroyed
• The interaction monitor now correctly handles mouseenter and mouseleave events
• The interaction monitor now correctly handles events generated on calculation rows
• The scrollToRowPosition function now resolves if the row is already visible
• Pagination console warning about missing response params, now pull their contents from the correct table options
• The header sorter arrow is now correctly aligned in RTL mode
• The VerticalVirtualDOM renderer no longer clears the minWidth of the table element on redraw
• Bulk select/deselect of rows now triggers the rowSelected or rowDeselected events for each affected row, then triggers the rowSelectionChanged once when all selections have been changed
• XLSX downloads now only contain merged cell data if the table contains merged cells
• PDF downloader now correctly handles grouped column headers
• Optimised the getElement function on the Group component, to prevent unnecessary regeneration of the component on every call.

v5.0.10 Release

The following minor updates and bugfixes have been made:

• Fixed browser freeze when responsiveLayout is set to collapse
• Cell edit validation error borders are now correctly removed when cell a edit is cancelled
• Fixed regression in horizontal virtual DOM renderer that was causing columns to build up and corrupt the display
• The table can now handle large number of rows (>700,000) without throwing a "Maximum call stack size exceeded" error
• Frozen columns in calculation rows are now correctly aligned when row grouping is enabled
• The interaction monitor has been optimized