Old Documentation

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

Release Notes

Table Height
Menus
Data Trees
Cell Alignment
Editors
Clipboard
Printing
HTML Output
Download
Frozen Columns
Auto Columns
Filters
Column Calculations
Key Bindings
Bug Fixes

Table Height

In this release the virtual DOM has undergone some upgrades to make it easier to use the table in a variety of scenarios.

In scenarios where there is no height set on the table the Virtual DOM will now be used where instead it used to revert to classic render mode. This should have a range of benefits, making variable height tables easier and smoother to use, and allowing for tables to expand to show all their rows until they overflow their parent, then moving to using a vertical scroll bar.

This section take you through the different approaches to setting table height properties and the pros and cons of each.

Fixed Height Tables

Tabulator works most efficiently when the table has a fixed height, either defined in the CSS for the element or set it using the height option in the table constructor, this can be set to any valid CSS value

var table = new Tabulator("#example-table", {
    height:"100%",
});

By setting the height on the table, you allow Tabulator's virtual DOM to optimize the tables memory and processor usage. It does this by only rendering the rows you see in the table (plus a few above and below the current view) and creates and destroys the rows as you scroll through the table.

This allows tabulator to handle thousands of rows with no overhead as it only processes the information it needs to display.

If a height is set on the table then it will display vertical scroll bars when the number of row exceeds the table height. If there are less rows than the height of the table then the background of the table will be visible.

Variable Height Tables

If you would rather that your table takes up as much space as is needed to show all the available rows, then simply don't specify a height on your table element or in your table constructor.

Without a height the table will keep expanding to fit the number of available rows and will never display a vertical scroll bar.

Slow Rendering: It is worth noting that if you are loading a lot of rows into your table without a height set then it may result is blocking of the browser and slow render speeds as it takes a lot of memory to draw 100's of rows onto the screen.

Maximum Table Height

With a variable table height you can set the maximum height of the table either defined in the max-height CSS property for the element or set it using the maxHeight option in the table constructor, this can be set to any valid CSS value

var table = new Tabulator("#example-table", {
    maxHeight:"100%", //do not let table get bigger than the height of its parent element
});

By setting this you can allow your table to expand to fit the data, but not overflow its parent element. When there are too many rows to fit in the available space, the vertical scroll bar will be shown. This has the added benefit of improving load times on larger tables

Full Height Tables

If you are creating a table that has no height or maximum height and you want it to show all rows without a scroll bar, then it is advisable to disable the Vitrual DOM as the table will become inefficient if it tries to virtuallymanage a table where all rows are visible. To do this you can set the virtualDom option to false to force classic rendering.

var table = new Tabulator("#example-table", {
    virtualDom:false, //disable virtual DOM rendering
});

Though it should be noted that using a table in this way with a large number of rows will result in poor performance

Minimum Table Height

With a variable table height you can set the minimum height of the table either defined in the min-height CSS property for the element or set it using the minHeight option in the table constructor, this can be set to any valid CSS value

var table = new Tabulator("#example-table", {
    minHeight:300, //do not let table get smaller than 300 px heigh
});

Advanced Options

There are many scenarios in which you many need to tweak the way the virtual DOM works or disable it all together. For example tables with significantly varying row height, or very large data sets.

In these cases, have a read of the Virtual DOM Documentation to find out more.

Disabling the Virutal DOM

The classic render mode is also still available to those that wish to use it, but now it can only be enabled by explicitly disabling the virtual DOM

var table = new Tabulator("#example-table", {
    virtualDom:false, //disable virtual DOM rendering
});

For more information on the effect of disabling the virtual DOM please read the Virtual DOM Documentation

Menus

Tabulator now has a range of options for providing context menus and header menus on a table.

In the example below the headerMenu column definition option is used to add a menu to column headers, and the rowContextMenu option is used to add a right click context menu to rows.

Source Code

HTML

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

JavaScript

//define row context menu contents
var rowMenu = [
    {
        label:"<i class='fas fa-user'></i> Change Name",
        action:function(e, row){
            row.update({name:"Steve Bobberson"});
        }
    },
    {
        label:"<i class='fas fa-check-square'></i> Select Row",
        action:function(e, row){
            row.select();
        }
    },
    {
        separator:true,
    },
    {
        label:"<i class='fas fa-trash'></i> Delete Row",
        action:function(e, row){
            row.delete();
        }
    },
]

//define row context menu
var headerMenu = [
    {
        label:"<i class='fas fa-eye-slash'></i> Hide Column",
        action:function(e, column){
            column.hide();
        }
    },
    {
        label:"<i class='fas fa-arrows-alt'></i> Move Column",
        action:function(e, column){
            column.move("col");
        }
    }
]

//initialize table
var table = new Tabulator("#example-table", {
    height:"311px",
    layout:"fitColumns",
    rowContextMenu: rowMenu, //add context menu to rows
    columns:[
        {title:"Name", field:"name", headerMenu:headerMenu},
        {title:"Progress", field:"progress", hozAlign:"right", sorter:"number", headerMenu:headerMenu},
        {title:"Gender", field:"gender", headerMenu:headerMenu},
        {title:"Rating", field:"rating", hozAlign:"center", headerMenu:headerMenu},
        {title:"Favourite Color", field:"col", headerMenu:headerMenu}, //add menu to this column header
    ],
});

Menu Items

Each menu option accepts an array of menu item objects, with each object representing an item in the menu

var table = new Tabulator("#example-table", {
    rowContextMenu: [
        {
            label:"Hide Column",
            action:function(e, column){
                column.hide();
            }
        },
        {
            separator:true,
        },
        {
            disabled:true,
            label:"Move Column",
            action:function(e, column){
                column.move("col");
            }
        }
    ]
});

Labels

The label is a mandatory property for standard menu items and sets the display text for the item

This property can take either a string, HTML or a DOM Node for the labels contents

{
    label:"Hide Column",
}

Alternativly you can pass a function to this property which will be called when the menu is loaded. A Component for the column/cell/row that triggered the menu will be passed in as the first argument. The function should return the contents for the label as outlined above.

{
    label:function(component){
        //component - column/cell/row component that triggered the menu

        return "Delete " . component.getData().name; //customise menu contents with row data
    },
}

Action

The action is a mandatory property for standard menu items and sets a callback that will be triggered when the menu item is clicked

The first argument is the event object for the click event on the menu item. The second argument will be a column/cell/row Component for the component that triggered the menu

{
    action:function(e, component){
        //e - click event from the menu item click
        //component - column/cell/row component that triggered the menu

        return component.delete(); //delete the row the context menu was loaded on
    },
}

e action this is a callback that will be triggered if the user clicks on the menu item, it is passed two arguments

Columns of the table can be set as editable using the editor property in the column definition. (see Define Columns for more details).

Disabled Items

You can disable a menu item by setting the disabled property to true on the item. This will grey out the item in the menu and prevent the user from clicking on it

{
    disabled:true,
}

{
    label:function(component){
        //component - column/cell/row component that triggered the menu

        return !component.getData().approved; //disable the menu item if the row data approved property is true
    },
}

Separators

You can add a horizontal separator to a list of menu items by including an object with the separator property set to true

{
    separator:true,
}

Menu Items Generator Function

If you would prefer to generate your menu item layout when the menu is opened you can pass a callback function to any of the menu options.

A Component for the column/cell/row that triggered the menu will be passed in as the first argument. The function should return an array of menu objects for the menu.

If the function returns a value of false or an empty array, the menu will not be shown

var table = new Tabulator("#example-table", {
    rowContextMenu: function(component){

        var menu = [];

        if(!component.getData().approved){
            menu.push({
                label:"Approve User",
                action:function(e, column){
                    component.update({"approved":true});
                }
            })
        }else{
            menu.push({
                label:"Unapprove User",
                action:function(e, column){
                    component.update({"approved":false});
                }
            })
        }

        return menu;
    }
});

Column Header Menus

You can add a menu to any column by passing an array of menu items to the headerMenu option in that columns definition.

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

//define row context menu
var headerMenu = [
    {
        label:"Hide Column",
        action:function(e, column){
            column.hide();
        }
    },
]

//add header menu in column definition
var table = new Tabulator("#example-table", {
    columns:[
        {title:"Name", field:"name", width:200, headerMenu:headerMenu}, //add menu to this column header
    ]
});

Column Header Context Menus

You can add a right click context menu to any column by passing an array of menu items to the headerContextMenu option in that columns definition.

//define row context menu
var headerContextMenu = [
    {
        label:"Hide Column",
        action:function(e, column){
            column.hide();
        }
    },
]

//add header menu in column definition
var table = new Tabulator("#example-table", {
    columns:[
        {title:"Name", field:"name", width:200, headerContextMenu:headerContextMenu}, //add a context menu to this column header
    ]
});

Column Cell Context Menus

You can add a right click context menu to any columns cells by passing an array of menu items to the contextMenu option in that columns definition.

//define row context menu
var cellContextMenu = [
    {
        label:"Reset Value",
        action:function(e, cell){
            cell.setValue("");
        }
    },
]

//add header menu in column definition
var table = new Tabulator("#example-table", {
    columns:[
        {title:"Name", field:"name", width:200, contextMenu:cellContextMenu}, //add a context menu to the cells in this column
    ]
});

Row Context Menus

You can add a right click context menu to any columns cells by passing an array of menu items to the contextMenu option in that columns definition.

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

Data Trees

Calculations for Data Trees

When you are using the dataTree option with your table, the column calculations will by default only use the data for the top level rows and will ignore any children.

To include child rows in the column calculations set the dataTreeChildColumnCalcs option to true in the table constructor

var table = new Tabulator("#example-table", {
    dataTree:true, //show data in a tree structure
    dataTreeChildColumnCalcs:true, //include child rows in column calculations
});

Visible Children Column calculations will only include the child rows if their tree branch is open, hidden rows on closed branches are not included in calculations.

Child Row Selection

If you are using data trees in a table that also has row selection enabled, the default behaviour will be for selection of each row to be toggled individually as the user clicks on it.

You can now cause the selection/deselection to propagate down to the child rows as well. To do this, set the dataTreeSelectPropagate option to true in the table constructor.

var table = new Tabulator("#example-table", {
    dataTree:true,
    dataTreeSelectPropagate:true, //propagate selection events from parent rows to children
});

Child Row Styling

Each child row is now assigned a class based on its level in the tree. This allows you to differentiate between different tree levels by styling their classes.

For example, all first level children will be assigned the class tabulator-tree-level-1

Open State Update Persistence

Rows will now correctly maintain their open state when they are updated by the update, updateData and replaceData functions

Print Output

Data tree formatting is now included in print output as standard.

If you don't want data trees or child rows displayed in the print output, then you can set the dataTree property to false in the prettyprint setup option:

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

HTML Output

Data tree formatting is now included as standard in the HTML output generated from the getHtml function.

If you don't want data trees or child rows displayed in the HTML output, then you can set the dataTree property to false in the htmlOutputConfig setup option:

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

Clipboard Output

Data tree formatting is now included in clipboard output as standard.

If you don't want data trees or child rows displayed in the clipboard output, then you can set the dataTree property to false in the prettyprint setup option:

var table = new Tabulator("#example-table", {
    clipboardCopyConfig:{
        dataTree:false, //do not include data tree in clipboard table
    },
});

Cell Alignment

The cell contents alignment system has been upgraded in this release, to allow setting of cell alignment on a global scale and to allow vertical alignment of cell contents

Horizontal Alignment

By default table cells have the same horizontal alignment as the containing element for the table. To change this, you can now globally set the horizontal text alignment for all cells in the table using the cellHozAlign option:

var table = new Tabulator("#example-table", {
    cellHozAlign:"center", //center align cell contents
});

The property can take one of three values:

left - left align cell contents
center - center align cell contents
right - right align cell contents

If you want to set the horizontal alignment on a column by column basis, you can use the renamed hozAlign property in a column's definition:

var table = new Tabulator("#example-table", {
    columns:[
        {title:"Name", field:"name", hozAlign:"right"}, //right align column contents
    ],
});

Vertical Alignment

By default table cells are vertically aligned to the top of the cell. You can now globally set the vertical text alignment for all cells in the table using the cellVertAlign option:

var table = new Tabulator("#example-table", {
    cellVertAlign:"middle", //vertically center cell contents
});

The property can take one of three values:

top - align cell contents to the top
middle - align cell contents to the middle
bottom - align cell contents to the bottom

If you want to set the vertical alignment on a column by column basis, you can use the vertAlign property in a column's definition:

var table = new Tabulator("#example-table", {
    columns:[
        {title:"Name", field:"name", vertAlign:"bottom"}, //bottom align column contents
    ],
});

Editors

Text Input Masking

Built in editors based on input elements such as the input, number, textarea and autocomplete editors have the ability to mask the users input to restrict it to match a given pattern.

This can be set by passing a string to the the mask option in the columns editorParams

{title:"Name", field:"name", editor:"input", editorParams:{mask:"AAA-999"}}

Each character in the string passed to the mask option defines what type of character can be entered in that position in the editor.

A - Only a letter is valid in this position
9 - Only a number is valid in this position
* - Any character is valid in this position
Any other character - The character in this position must be the same as the mask

For example, a mask string of "AAA-999" would require the user to enter three letters followed by a hyphen followed by three numbers

Autofill Fixed Characters

If you are using fixed characters in your mask (any character other that A, 9 or *), then you can get the mask to automatically fill in these characters for you as you type by setting the maskAutoFill option in the editorParams to true

{title:"Name", field:"name", editor:"input", editorParams:{
    mask:"AAA-999",
    maskAutoFill:true,
}}

Custom Pattern Characters

If you want to use the characters A, 9 or * as fixed characters then it is possible to change the characters looked for in the mask by using the maskLetterChar, maskNumberChar and maskWildcardChar options in the editorParams

{title:"Name", field:"name", editor:"input", editorParams:{
    mask:"A!!-9BBB$",
    maskLetterChar:"B",
    maskNumberChar:"!",
    maskWildcardChar:"$",
}}

In the example the above the input would be masked with the first character being "A" followed by two numbers, followed by a hyphen, followed by the number "9", followed by three numbers, followed by any character

Autocomplete Editor

The autocomplete editor has had a complete rebuild in this release to offer a range of new functions

Search Function

The searchFunc callback will now receive a values array that matches the one provided to the values property of the editor params, and should return an array or object that is formatted to be one of the valid values types.

searchFunc:function(term, values){ //search for exact matches
    var matches = []

    values.forEach(function(item){
        if(item === term){
            matches.push(item);
        }
    });

    return matches;
},

The searchFunc can now also return a promise, to allow for asynchronous value searching, the promise should resolve with a valid value list when ready

searchFunc:function(term, values){
    return new Promise((resolve, reject) => {
        //fetch list items from server
        fetch("http://test.com?search=" + term)
        .then((response){
            resolve(response.json()); //parse json response and resolve promise
        });
    });
},

Searching Placeholder

If you return a promise from the searchFunc callback then a "Searching..." placeholder will be displayed until the promise resolved.

You can customise this placeholder using the searchingPlaceholder option. It will accept either a string, and HTML string or a DOM Node for the contents of the placeholder

searchingPlaceholder:"Filtering ...", //set the search placeholder to "Filtering ..."

Empty Placeholder

If no results match the term searched for by your user, then an empty list will be displayed. In this circumstance it is possible to display place holder to the user to let them know what has happened

You can customise this placeholder using the emptyPlaceholder option. It will accept either a string, and HTML string or a DOM Node for the contents of the placeholder

emptyPlaceholder:"(no matching results found)", //set the empty list placeholder

Clipboard

The clipboard module has been rebuilt in this release to use the export module for content generation. This allows all exported data to come from one place making it easier to maintain. As a result of this there have been several changes to the functionality of the module in this release.

Clipboard Contents

By default Tabulator includes column headers, row groups data trees and column calculations in the clipboard output.

You can choose to remove column headers groups, row groups or column calculations from the output data by setting the values in the clipboardCopyConfig option in the table definition:

var table = new Tabulator("#example-table", {
    clipboardCopyConfig:{
        columnHeaders:false, //do not include column headers in clipboard output
        columnGroups:false, //do not include column groups in column headers for printed table
        rowGroups:false, //do not include row groups in clipboard output
        columnCalcs:false, //do not include column calculation rows in clipboard output
        dataTree:false, //do not include data tree in printed table
    },
});

Show Unformatted Cell Values

Quite often graphical formatters like progress or star do not copy and paste well into spreadsheet applications. If you use these formatters you can set the formatCells property to false in the clipboardCopyConfig option to show only raw unformatted cell values in the clipboard output:

var table = new Tabulator("#example-table",  {
    clipboardCopyConfig:{
        formatCells:false, //show raw cell values without formatter
    },
});

Row Range

The clipboardCopyRowRange option takes a Row Range Lookup value and allows you to choose which rows are included in the clipboard output:

visible - Rows currently visible in the table viewport
active - Rows currently in the table (rows that pass current filters etc)
selected - Rows currently selected by the selection module (this includes not currently active rows)
all - All rows in the table regardless of filters

Copy Formatter

You can alter the finished output to the clipboard using the clipboardCopyFormatter callback. The callback function receives two arguments, the first is a string representing the type of content to be formatted (either "plain" or "html" depending on the type of data entering the clipboard). The second argument is the string that is about to be inserted into the clipboard. The function and should return a string that will be inserted into the clipboard:

var table = new Tabulator("#example-table", {
    clipboardCopyFormatter:function(type, output){
        //type - a string representing the type of the content, either "plain" or "html"
        //output - the output string about to be passed to the clipboard

        if(type == "plain"){
            output += "/n Copyright Bob Green 2020";
        }

        return output;
    }
});

These selectors can also be used when programmatically triggering a copy event. in this case if the selector is not specified it will default to the value set in the clipboardCopyRowRange property (which is active by default).

var table = new Tabulator("#example-table", {
    clipboardCopyRowRange:"selected", //change default selector to active
});

Data Trees

Data tree formatting is now included in clipboard output as standard.

If you don't want data trees or child rows displayed in the clipboard output, then you can set the dataTree property to false in the prettyprint setup option:

var table = new Tabulator("#example-table", {
    clipboardCopyConfig:{
        dataTree:false, //do not include data tree in clipboard table
    },
});

Formatters

Cell Formatters

When copying to the clipboard you may want to apply a different formatter from the one usualy used to format the cell, you can do this using the formatterClipboard column definition option.

You can use the formatterClipboardParams to pass in any additional params to the formatter

These properties take the same inputs as the standard formatter property

//define clipboard formatter
function clipboardFormatter(cell, formatterParams, onRendered){
    return cell.getValue() ? "YES" : "NO";
}

//column definition
{title:"Driver", field:"driver", formatter:"tickCross", formatterClipboard:printFormatter} //show "YES"/"NO" in the cell when copying to the clipboard

Passing a value of false into the formatter will cause the value to be shown as plain text without a formatter

Row Formatter

When copying to the clipboard you may want to apply a different formatter from the one usualy used to format the row. You can now do this using the rowFormatterClipboard table option, which takes the same inputs as the standard rowFormatter property.

var table = new Tabulator("#example-table", {
    rowFormatter:function(row){
        //row - row component

        var data = row.getData();

        if(data.col == "blue"){
            row.getElement().style.backgroundColor = "#1e3b20";
        }
    },
    rowFormatterClipboard:function(row){
        //row - row component

        var data = row.getData();

        if(data.col == "blue"){
            row.getElement().style.backgroundColor = "#0000ff"; //use a different shade of blue background when copying to the clipboard
        }
    },
});

Passing a value of false into the formatter prevent the default row formatter from being run when the table is copied to the clipboard

Printing

Styled Printing Option

The printCopyStyle option has been renamed to printStyled to improve naming consistency accross export options

var table = new Tabulator("#example-table", {
    printStyled:true, //copy Tabulator styling to HTML table
});

Remove Column Headers

You can now remove column headers in the printed output by setting the columnHeaders property to false in the printConfig option:

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

Show Unformatted Cell Values

In certain situations you may want to print the raw unformatted cell value instead of any graphical formatters, to do this, set the formatCells property to false in the printConfig option:

var table = new Tabulator("#example-table",  {
    printConfig:{
        formatCells:false, //show raw cell values without formatter
    },
});

Row Range

By default, only the rows currently visible in the table viewport will be added to the HTML table, the printRowRange option takes a Row Range Lookup value and allows you to choose which rows are included in the print output:

visible - Rows currently visible in the table viewport
active - Rows currently in the table (rows that pass current filters etc)
selected - Rows currently selected by the selection module (this includes not currently active rows)
all - All rows in the table regardless of filters

var table = new Tabulator("#example-table", {
    printRowRange:"selected", //change default selector to selected
});

Custom Row Range

For custom row ranges it is also possible to pass a function into the printRowRange option that should return an array of Row Components:

var table = new Tabulator("#example-table", {
    printRowRange:function(){
        //only copy rows to print where the age is over 18
        return this.getRows().filter((row) => {
            return row.getData().age > 18;
        });
    },
});

Accessors

You can use the accessorPrint and accessorPrintParams options on a column definition to alter the value of data in a column before it is printed.

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

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

{title:"Under Age", field:"age", accessorPrint:ageAccessor, accessorPrintParams:{legalAge:18} }

Full details of how accessors work can be found in the Accessors Documentation.

Programatic Printing

The first argument of the print function has been changed to now be a Row Range Lookup value to allow a wider range of row configurations to be included in the print output

table.print("active");

Formatter onRendered Callback

The onRendered callback for formatters is now triggered when formatters are called to build the HTML output for printing or the output of the getHTML function.

Because there is no way to know when the HTML generated by this functionality is actualy visible as it is never added to the DOM, the onRendered function is triggered as soon as the formatter returns its contents, which may result in a malfunction for some custom formatters.

If you need your custom formatter to behave differently under these circumstances, you can perform the following check on the cell variable passed into the formatter to see if you need to take any specific action

onRendered(function(){
    if(!(cell instanceof CellComponent)){
        // formatter being called for print or getHTML output
    }
}

Data Trees

Data tree formatting is now included in print output as standard.

If you don't want data trees or child rows displayed in the print output, then you can set the dataTree property to false in the prettyprint setup option:

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

Formatters

Cell Formatters

When printing you may want to apply a different formatter from the one usualy used to format the cell, you can do this using the formatterPrint column definition option.

You can use the formatterPrintParams to pass in any additional params to the formatter

These properties take the same inputs as the standard formatter property

//define print formatter
function printFormatter(cell, formatterParams, onRendered){
    return cell.getValue() ? "YES" : "NO";
}

//column definition
{title:"Driver", field:"driver", formatter:"tickCross", formatterPrint:printFormatter} //show "YES"/"NO" in the cell when printing

Passing a value of false into the formatter will cause the value to be shown as plain text without a formatter

Row Formatter

When printing you may want to apply a different formatter from the one usualy used to format the row. You can now do this using the rowFormatterPrint table option, which takes the same inputs as the standard rowFormatter property.

var table = new Tabulator("#example-table", {
    rowFormatter:function(row){
        //row - row component

        var data = row.getData();

        if(data.col == "blue"){
            row.getElement().style.backgroundColor = "#1e3b20";
        }
    },
    rowFormatterPrint:function(row){
        //row - row component

        var data = row.getData();

        if(data.col == "blue"){
            row.getElement().style.backgroundColor = "#0000ff"; //use a different shade of blue background when printing
        }
    },
});

Passing a value of false into the formatter prevent the default row formatter from being run during print

HTML Output

Row Range

The first argument of the getHtml function now takes a Row Range Lookup value that determines which rows are included in the HTML table.

var htmlTable = table.getHtml("visible", true, {columnGroups:false}); //get styled html for visible rows of table that copies the table style without grouped column headers

Remove Column Headers

You can now remove column headers in the HTML output by setting the columnHeaders property to false in the htmlOutputConfig option:

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

Show Unformatted Cell Values

In certain situations you may want to include the raw unformatted cell value instead of any graphical formatters, to do this, set the formatCells property to false in the htmlOutputConfig option:

var table = new Tabulator("#example-table",  {
    htmlOutputConfig:{
        formatCells:false, //show raw cell values without formatter
    },
});

Data Trees

Data tree formatting is now included as standard in the HTML output generated from the getHtml function.

If you don't want data trees or child rows displayed in the HTML output, then you can set the dataTree property to false in the htmlOutputConfig setup option:

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

Accessors

You can use the accessorHtmlOutput and accessorHtmlOutputParams options on a column definition to alter the value of data in a column before the html is generated.

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

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

{title:"Under Age", field:"age", accessorHtmlOutput:ageAccessor, accessorHtmlOutputParams:{legalAge:18} }

Formatters

Cell Formatters

When the getHtml function is called you may want to apply a different formatter from the one usualy used to format the cell, you can do this using the formatterHtmlOutput column definition option.

You can use the formatterHtmlOutputParams to pass in any additional params to the formatter

These properties take the same inputs as the standard formatter property

//define html formatter
function htmlFormatter(cell, formatterParams, onRendered){
    return cell.getValue() ? "YES" : "NO";
}

//column definition
{title:"Driver", field:"driver", formatter:"tickCross", formatterHtmlOutput:htmlFormatter} //show "YES"/"NO" in the cell when the getHtml function is called

Passing a value of false into the formatter will cause the value to be shown as plain text without a formatter

Row Formatter

When the getHtml function is called you may want to apply a different formatter from the one usualy used to format the row. You can now do this using the rowFormatterHtmlOutput table option, which takes the same inputs as the standard rowFormatter property.

var table = new Tabulator("#example-table", {
    rowFormatter:function(row){
        //row - row component

        var data = row.getData();

        if(data.col == "blue"){
            row.getElement().style.backgroundColor = "#1e3b20";
        }
    },
    rowFormatterHtmlOutput:function(row){
        //row - row component

        var data = row.getData();

        if(data.col == "blue"){
            row.getElement().style.backgroundColor = "#0000ff"; //use a different shade of blue background when the getHtml function is called
        }
    },
});

Passing a value of false into the formatter prevent the default row formatter from being run ont the output table

Download

Data Trees

Data tree formatting is now included as standard in downloads.

If you don't want data trees or child rows displayed in the HTML output, then you can set the dataTree property to false in the downloadConfig setup option:

var table = new Tabulator("#example-table", {
    downloadConfig:{
        dataTree:false, //do not include data tree in download
    },
});

Frozen Columns

Frozen Column Groups

You can now freeze an entire column group by using the frozen property in the parent group definition

var table = new Tabulator("#example-table", {
    [
        {
            title:"Column Group",
            frozen:true, //frozen column group on left of table
            columns:[
                {title:"Name", field:"name"},
                {title:"Age", field:"age"},
            ]
        },
        {title:"Eye Colour", field:"eyes"},
        {title:"Height", field:"height", frozen:true}, //frozen column on right of table
    ]
});

Note: You cannot freeze individual columns in a column group, either the entire group is frozen or none of the columns are

Auto Columns

Sort/Filter Persistence on Update

The automatic column generation system, enabled using the autoColumns setup option has been improved.

Triggering an ajax request using sort, filter or pagination actions will no longer cause a regeneration of the columns, so existing sorting/filters are no longer reset when any of these actions are performed.

Filters

Real Time Header Filter Delay

when using real time header filtering, Tabulator will wait 300 milliseconds after a keystroke before triggering the filter. You can customise this delay by using the headerFilterLiveFilterDelay table setup option:

var table = new Tabulator("#example-table", {
    headerFilterLiveFilterDelay:600, //wait 600ms from last keystroke before triggering filter
});

Get Header Filter Value

You get the current header filter value of a column by calling the getHeaderFilterValue function, This function takes any of the standard column component look up options as its first argument.

var filterValue = table.getHeaderFilterValue("name"); //get the header filter value for the name column

Alternatively if you have the Column Component of the column containing the header filter, you can call the getHeaderFilterValue function directly on the component.

var filterValue = column.getHeaderFilterValue() //get the header filter value for this column

Column Calculations

Manual Recalculation

You can now manually trigger recalculation of column calculations by calling the recalc function on the table

table.recalc(); //recalculate all column calculations

Key Bindings

The keybindings module can now detect use of the meta key as well as shift and ctrl

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

Bug Fixes

V4.6.0 Release

The following minor bugs have been fixed:

The html table export module now correctly maps cell text alignment per column
Fixed issue with updateColumnDefinition function not updating the column
The rowSelectionChanged callback is now only triggered once when a row is selected with a selectableRandeMode of "click"
Text and number editors now use strict comparison to measure value change to prevent issues when setting an empty cell to 0
Fixed regression with the mutatorClipboard mutator
The "prev" and "next" pagination buttons now correctly persist the current page number when persistant config is in use
The regression in the "cookie" persistence mode has been resolved
The rowSelection title formatter now correctly updates on row deletion
Fixed alignment issue on column calc redraw when using fronzen columns
Ghost nested object structures are no longer created in row data if a column's field is set to a nested object property that does not exist in the row data
When grouped columns are moved thier updated order is now correctly recorded with the partent column group
Column group titles are now correctly sized to match the total widths of the child columns when nested column groups are used
Hidding the last column in a column group will no longer result in a 1px right shift occurring in neighborough column headers
The tabEndNewRow functionality now works in Firefox and Edge browsers
calling the clearHeaderFilter function no longer results in extra ajax calls when filters are next used
Row numbers now remain in order when moving, adding or deleting rows
Input editors now behave correctly when selecting text with a double click
Empty table placeholder heights are now respected on tables without a height defined
Bulk undoing of of repeated row deletion now works correctly
When running concurrent ajax requests the loading element will not be hidden until all requests have completed
Fixed row position issues when using history module to undo or redo a row move
Warnings are no longer shown in the console when building a Tabulator from an HTML table with camel case tabulator attributes
Ajax sorting or filtering no longer resets the horizontal scroll position of the table

V4.6.1 Release

The following minor bugs have been fixed:

Removing row grouping during table use, now correctly propagates to download module
The table no longer causes a console error if it is created on an element that is not attached to the DOM
Fixed regression in autocomplete editor, it now correctly retains old value when blurring with invalid value
The deleteRow function will now delete rows in the order they appear in the table to allow for smoother more predictable undo functionality

V4.6.2 Release

The following minor bugs have been fixed:

Fixed issue with object pointer isolation when either paginationDataSent or paginationDataReceived options are used in multiple tables on the same page
Improved sorter performance with multi-column sorts
Context menu will now load in correct position when page contents does not take up the full viewport height
Fixed styling issue with modern theme when frozen columns were in use
The scroll bar on the options lists for the select and autocomplete editors now works correctly on Internet Explorer
When paginating data without the paginationSize option set on a fixed height table, the styling of the rows is taken into consideration when calculating the correct page size.
Navigating the table up and down through editable cells no longer causes editable rows out of view to jump to the center of the table when they gain focus
Virtual DOM buffer is now correctly maintained when scrolling from the top and bottom edges of the table. This will prevent visual glitches and navigation issues when vertically scrolling with arrow keys from either end of the table
The onRendered callback in formatters is now correctly called after an edit has been successful or been cancelled
The progress editor has been improved to allow easier editing with arrow and tab keys

V4.6.3 Release

The following minor bugs have been fixed:

Fixed regression in data trees, where editing the cell containing the controls resulted in them being removed
Unused legacy CSS from v3.5 has been removed from stylesheets
Fixed variable scoping issue in the _buildColumnHeaderContent function
Column Components are now correctly passed to menu generator functions
The getHeaderFilterValue now correctly returns the filter value
Child rows in data trees are now correctly indented when lazy loaded after render
Using the selected option in any export function now works correctly
If a row is deleted when a cell it contains is being edited, that edit is now cancelled before the row is deleted
If a column is deleted when a cell it contains is being edited, that edit is now cancelled before the column is deleted
Cells with a value of an empty sting now render the correct height
Fix styling regression in bootstrap 4 theme with dark mode classes
Row height is now correctly recalculated on row data update
Prevent text selection issues on chrome when double clicking on non editable data
Fixed typo in deprecation warning
Movable rows dragged directly above group headers now have their group key changed to the correct value

Version 6.3 Released!

Release Notes

Table Height

Fixed Height Tables

Variable Height Tables

Maximum Table Height

Full Height Tables

Minimum Table Height

Advanced Options

Disabling the Virutal DOM

Menus

HTML

JavaScript

Menu Items

Labels

Action

Disabled Items

Separators

Menu Items Generator Function

Column Header Menus

Column Header Context Menus

Column Cell Context Menus

Row Context Menus

Data Trees

Calculations for Data Trees

Child Row Selection

Child Row Styling

Open State Update Persistence

Print Output

HTML Output

Clipboard Output

Cell Alignment

Horizontal Alignment

Vertical Alignment

Editors

Text Input Masking

Autofill Fixed Characters

Custom Pattern Characters

Autocomplete Editor

Search Function

Searching Placeholder

Empty Placeholder

Clipboard

Clipboard Contents

Show Unformatted Cell Values

Row Range

Copy Formatter

Data Trees

Formatters

Cell Formatters

Row Formatter

Printing

Styled Printing Option

Remove Column Headers

Show Unformatted Cell Values

Row Range

Custom Row Range

Accessors

Programatic Printing

Formatter onRendered Callback

Data Trees

Formatters

Cell Formatters

Row Formatter

HTML Output

Row Range

Remove Column Headers

Show Unformatted Cell Values

Data Trees

Accessors

Formatters

Cell Formatters

Row Formatter

Download

Data Trees

Frozen Columns

Frozen Column Groups

Auto Columns

Sort/Filter Persistence on Update

Filters