Printing

• Overview
• Print Styling
• Full Page Printing

Overview Demo

Tabulator 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.

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

/*Horizontally center header and footer*/
.tabulator-print-header, tabulator-print-footer{
    text-align:center;
}

//Build Tabulator
var table = new Tabulator("#example-table", {
    height:"311px",
    layout:"fitColumns",
    printAsHtml:true,
    printHeader:"<h1>Example Table Header<h1>",
    printFooter:"<h2>Example Table Footer<h2>",
    columns:[
    {title:"Name", field:"name", width:200, editor:"input"},
    {title:"Progress", field:"progress", align:"right", editor:"input"},
    {title:"Gender", field:"gender", editor:"input"},
    {title:"Rating", field:"rating",  align:"center", width:100},
    {title:"Favourite Color", field:"col"},
    {title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
    {title:"Driver", field:"car", align:"center", sorter:"boolean"},
    ],
});

//print button
$("#print-table").on("click", function(){
   table.print(false, true);
});

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 printed table
        rowGroups:false, //do not include row groups in printed table
        columnCalcs:false, //do not include column calcs in printed 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
    }
});