Old Documentation

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

Release Notes

Scrolling Performance
Columns
Editors
HTML Table Generation
Printing
Downloads
Table Setup Warnings
Typescript Typings
Vue Component
Bug Fixes

Scrolling Performance

A series of updates have been made to move Tabulator over to using passive event listeners for user interaction. This has resulted in improved scrolling performance and smoother scrolling animation.

Columns

Column Header Visibility

By setting the headerVisible option to false you can hide the column headers and present the table as a simple list if needed.

var table = new Tabulator("#example-table", {
    headerVisible:false, //hide column headers
});

Editors

Input Editor

Search type input

the input editor now has an optional editorParams property, search that changes the input type from "text" to "search", this shows the "X" clear button to the right of the input to allow users to clear the cells value easily.

{title:"Example", field:"example", editor:"input", editorParams:{
    search:true, //use search type input box
}}

HTML Table Generation

New Module

Generation of raw HTML tables has been moved into the HtmlTableExport Module to allow the functionality to be reused in the print and clipboard functionality

Updated Output

The output getHtml function will now contain column header groups, row groups, and column calculations.

You can choose to remove column headers groups and row groups in the output data by setting the values in the htmlOutputConfig option in the table definition:

var table = new Tabulator("#example-table", {
    htmlOutputConfig:{
        columnGroups:false, /do not include column groups in column headers for HTML table
        rowGroups:false, //do not include row groups in HTML table
        columnCalcs:false, //do not include column calcs in HTML table
    },
});

New Function Arguments

By default, the getHtml function used to return a table containing all rows in the table. It now returns a table built of all active rows in the table (matching filters and sorts).

There are now three arguments that can be passed into the function to configure the output. the first argument is a boolean that determines whether the output table contains all active rows (false), or just those currently visible (true). By default this is false.

The second argument is a boolean that determines if the output of the function should be styled to match the table (true) or be a blank html table (false), by default this is false

The third argument takes an object that can be used to override the object set on the htmlOutputConfig option

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

Column Visibility

If you don't want to show a particular column in the HTML output you can set the htmlOutput property in its column definition object to false:

var table = new Tabulator("#example-table", {
    columns:[
        {title:"Hidden Column", field:"secret", htmlOutput:false} //hide data in HTML
    ]
});

You can also force a hidden column to be visibile in the HTML output by setting the htmlOutput property in its column definition object to true:

var table = new Tabulator("#example-table", {
    columns:[
        {title:"Hidden Column", field:"secret", visible:false, htmlOutput:true} //show hidden column in HTML
    ]
});

Printing

Tabulator now offers a range of print styling options, from deciding how your table should look on the page when the site is printed to printing full page tables.

Print Styling

By Default when a page is printed that includes a Tabulator it will be rendered on the page exactly as the table is drawn. While this is useful in most cases, some users prefer tohave more controll over the print output, for example showing all rows of the table, instead of just those visible with the current position of the scroll bar.

Tabulator provides a print styling mode that will replace the Tabulator with an HTML table for the printout giving you much more control over the look and feel of the table for the print out., to enable this mode, set the printAsHtml option to true in the table constructor.

var table = new Tabulator("#example-table", {
    printAsHtml:true, //enable html table printing
});

This will replace the table (in print outs only) with a simple HTML table with the class tabulator-print-table that you can use to style the table in any way you like.

It also has the benifit that because it is an HTML table, if it corsses a page break your browser will uatomatically add the column headers in at the top of the next page.

Table Contents

The HTML table will contain column header groups, row groups, and column calculations.

You can choose to remove any of these from the output data by setting the values in the printConfig option in the table definition:

var table = new Tabulator("#example-table", {
    printConfig:{
        columnGroups:false, /do not include column groups in column headers for HTML table
        rowGroups:false, //do not include row groups in HTML table
        columnCalcs:false, //do not include column calcs in HTML table
    },
});

Table Styling

If you want your printed table to be styled to match your Tabulator you can set the printCopyStyle to true, this will copy key layout styling to the printed table

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

Visible Rows

By default, only the rows currently visible in the Tabulator will be added to the HTML table, If you want to inclued all the active data (all currently filted/sorted rows) in the table you can set the printVisibleRows option to false.

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

Render Time
Because generating a table containing a lot of rows takes a lot of time and consumes a lot of memory, it is not advised to show all rows in your table if there are more than 1000 rows.

Column Visibility

If you don't want to show a particular column in the print table you can set the print property in its column definition object to false:

var table = new Tabulator("#example-table", {
    columns:[
        {title:"Hidden Column", field:"secret", print:false} //hide data in print data
    ]
});

You can also force a hidden column to be visibile in the print by setting the print property in its column definition object to true:

var table = new Tabulator("#example-table", {
    columns:[
        {title:"Hidden Column", field:"secret", visible:false, print:true} //show hidden column when printing
    ]
});

Full Page Printing

You can use the print function to trigger a full page printing of the contents of the table without any other elements from the page.

table.print();

There are three arguments that can be passed into the function to configure the output. the first argument is a boolean that determines whether the output table contains all active rows (false), or just those currently visible (true). By default this is false.

The second argument is a boolean that determines if the output of the function should be styled to match the table (true) or be a blank html table (false), if you leave this argument out it will take the value of the printCopyStyle option

The third argument takes an object that can be used to override the object set on the printConfig option

table.print(true, true, {columnGroups:false}); //full page print the table for visible rows of table that copies the table style without grouped column headers

Header

You can use the printHeader table setup option to define a header to be displayed when the table is printed.

var table = new Tabulator("#example-table", {
    printHeader:"<h1>THIS IS MY COOL TABLE</h1>", // set header content on printed table
});

This option can take one of three types of value:

string - you can pass an HTML string to be set as the contents header
DOM Node - you can pass DOM Node to be used as the header
function - a function that will be called when the table is printed, it should return either a string or DOM Node

The header contents will be placed inside a div with a class of tabulator-print-header to allow you to style your header with CSS

Print Header Placement
The print header will be inserted above the table on the printout, this will only occur on the first page of the print out, this should not be used as a page header.

Footer

You can use the printFooter table setup option to define a footer to be displayed when the table is printed.

var table = new Tabulator("#example-table", {
    printFooter:"<h3>THANKS FOR LOOKING AT MY TABLE</h3>", // set footer content on printed table
});

This option can take one of three types of value:

string - you can pass an HTML string to be set as the contents footer
DOM Node - you can pass DOM Node to be used as the footer
function - a function that will be called when the table is printed, it should return either a string or DOM Node

The footer contents will be placed inside a div with a class of tabulator-print-footer to allow you to style your footer with CSS

Print Footer Placement
The print footer will be inserted below the table on the printout, this will only occur on the last page of the print out, this should not be used as a page footer.

Print Formatting

The printFormatter table setup option allows you to carry out any manipulation of the print output before it is displayed to the user for printing

var table = new Tabulator("#example-table", {
    printFormatter:function(tableHolderElement, tableElement){
        //tableHolderElement - The element that holds the header, footer and table elements
        //tableElement - The table
    }
});

Downloads

Download Titles available in Column Groups

The downloadTitle property is now available in the column definition property for column groups to help with customization of table downloads.

var table = new Tabulator("#example-table", {
    columns:[
        {title:"Name", field:"name", width:160},
        {//create column group
            title:"Work Info",
            downloadTitle:"INFORMATION", //add custom title for use in downloads
            columns:[
                {title:"Progress", field:"progress", align:"right", sorter:"number", width:100},
                {title:"Rating", field:"rating", align:"center", width:80},
                {title:"Driver", field:"car", align:"center", width:80},
            ],
        },
    ],
});

PDF Document Processing Option

An optional callback documentProcessing can be set on the download config object, that is passed the jsPDF document object after the auto-table creation to allow full customisation of the PDF, see the jsPDF document for a full list of methods that can be called on this object

table.download("pdf", "data.pdf", {
    documentProcessing:function(doc){
        //carry out an action on the doc object
    }
});

Table Setup Warnings

Table Constructor Warnings

Tabulator will now produce console warnings if options are set on the table constructor using parameters that are not valid.

Column Definition Warnings

Tabulator will now produce console warnings if options are set on the a column definition using parameters that are not valid.

Typescript Typings

Thanks to the great work of @Jojoshua Tabulator now has a full script of TypeScript typings for any developers that need them.

They can be brought into your project with npm

npm install @types/tabulator-tables

An example of how to use the typings on your project can be found at: https://github.com/Jojoshua/TypedTabulator

Vue Component

Thanks to the hard work of @angeliski there is now a Vue.js component for Tabulator, to make it even easier to install in your Vue.js project

Full documentation on this component can be found at: https://vue-tabulator.netlify.com/

Bug Fixes

The following minor bugs have been fixed:

jQuery wrapper has been updated to include jquery-ui dependency
getDataCount function argument behaviour has been updated to match documentation
Fixed missing variable definition in the clipboard copy function
Added support for the cmd key on a mac instead of the ctrl key when selecting rows
Fixed typo in column calcs preventing bottom calcs from rendering
Fixed bitwise comaprison issue in the required validator
Fixed typo in the navigateDown function
Updated the dev dependencies in the package.lock and yarn.lock files
Fixed readonly issues on the select editor when used as a header filter
Improved console logging to remove unnecessary logs
Memory leak fixed when using column calculations and grouped rows in a table in classic render mode
Column calculations are now correctly hidden on hidden row groups when table is in classic render mode
Column calculations are now correctly updated in all modes when using row groups
"undefined" text no longer appears when an undefined value is passed into a textarea editor
The getNetColumn and getPrevColumn functions now return false if no matching column is available
The click row selection mode now respects the selectable row limit
Text selection no longer interferes with movable rows
Double clicking on a cell now only selects the text in that cell rather than other text in the row
The selection list from select and autocomplete editors is automatically hidden on scroll to prevent visual corruption
The getFilters function now correctly outputs complex filters

Version 6.2 Released!

Release Notes

Scrolling Performance

Columns

Column Header Visibility Demo

Editors

Input Editor

Search type input

HTML Table Generation

New Module

Updated Output

New Function Arguments

Column Visibility

Printing

Print Styling

Table Contents

Table Styling

Visible Rows

Column Visibility

Full Page Printing

Header

Footer

Print Formatting

Downloads

Download Titles available in Column Groups

PDF Document Processing Option

Table Setup Warnings

Table Constructor Warnings

Column Definition Warnings

Typescript Typings

Vue Component

Bug Fixes

Column Header Visibility