Version 6.3 Released!

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

Upgrade Guide v4.5 to 4.6

Previous Version Upgrades

If you are upgrading from any version of tabulator below version 4.5, you should read the v4.1 to 4.5 upgrade guide first.

Vitrual DOM

Full Height Tables

If your table 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

Clipboard

Copy Selector

The clipboardCopySelector option used to be used to set which rows would be visible in the clipboard output.

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

You should now use the clipboardCopyRowRange option which takes any valid Row Range Lookup value:

var table = new Tabulator("#example-table", {
    clipboardCopyRowRange:"all", //copy all rows to the clipboard even if they are filtered out
});

Copy Formatter

The clipboardCopyFormatter option has changed purpose in this release. It used to be used to take an array of row data and format it for output to the clipboard.

var table = new Tabulator("#example-table", {
    clipboardCopyFormatter:function(rowData){
        return JSON.stringify(rowData);
    }
});

It is now used to tweak the output from the export module before it is inserted into the clipboard. It therefor has a new set of arguments and must return a string for 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;
    }
});

Copy Function

The copy function now takes a Row Range Lookup value instead of the previous values of "table", "active" and "selected".

table.copyToClipboard("table")

You should now use a valid Row Range Lookup value in the first argument of this function:

table.copyToClipboard("all")

Printing

Styled Printing Option

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

Where you used to use the printCopyStyle option:

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

You should now use the printStyled option:

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

Print Visible Rows

The printVisibleRows option has been replaced with the printRowRange which allows for a great range of rows to be shown

Where you used to use the printVisibleRows option:

var table = new Tabulator("#example-table", {
    printVisibleRows:false, //print all rows in the table
});

You should now use the printRowRange option:

var table = new Tabulator("#example-table", {
    printRowRange:"all", //print all rows in the table
});

Programatic Printing

The first argument of the print function has been changed to now be a Row Range Lookup value

Where you used to pass a boolean to the first argument of the print function:

table.print(false);

You should now use a valid a Row Range Lookup value:

table.print("active");

HTML Output

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

Where you used to pass a boolean to the first argument of the getHtml function:

table.getHtml(false);

You should now use a valid a Row Range Lookup value:

table.getHtml("visible");

Cell Alignment

Where you used to set the horizontal alignment of a cell by using the align column definition property:

{title:"Name", field:"name", align:"center"} //center align cell

You should now use the paramhozAlign property:

{title:"Name", field:"name", hozAlign:"center"} //center align cell

Autocomplete Editor

Where an array of list objects used to be passed into the searchFunc calback and you used to have to check the value property of each object:

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

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

    return matches;
}

Now the contents of the values property are passed directly into the function so how you iterate on them depends on the value of the values propery, in the case of an array:

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

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

    return matches;
}
Donate