Quick Start Guide

You can have yourself up and running in a couple of minutes using the steps below:

Include the jQuery and jQuery UI libraries before you load the Tabulator library. you can either download these and load them from your local server or choose from a popular CDN.

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>

Include the Tabulator library and style sheet

<link href="dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="dist/js/tabulator.min.js"></script>

Bower Installation

To get Tabulator via the Bower package manager, open a terminal in your project directory and run the following commmand:

bower install tabulator --save

NPM Installation

To get Tabulator via the NPM package manager, open a terminal in your project directory and run the following commmand:

npm install jquery.tabulator --save
Then to add the library to your project, you will need to require it after the jquery-ui library:
require('jquery.tabulator');

CDNJS

To access Tabulator directly from the CDNJS CDN servers, include the following two lines at the start of your project, instead of the localy hosted versions:

<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.3.3/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.3.3/js/tabulator.min.js"></script>

Check out more of the great libraries available to use direclty from CDNJS at https://cdnjs.com/

The Virtual DOM and Table Rendering

Before you build your first table, it might be useful to know a bit about how Tabulator works.

Virtual DOM

Tabulator uses a virtual DOM to enable it to process 100,000's of rows without a performance overhead.

The virtual DOM works by only building the rows that are visible on the screen. As you scroll through the table, rows are created and destroyed as they enter/leave the of the visible area of the table.

This also means that it is a bad idea to try to use code outside of Tabulator to directly alter or bind events to DOM elements inside the table, because there is a good chance that the element you are trying to manipulate will be destroyed on the next scroll. Tabulator has a wide range of callbacks, formatters and other functions that allow you to manipulate the table contents in a way that is safe and wont be affected by the rows being recreated.

In order for the virtual DOM to work, Tabulator needs to know how big the table is. This means that you must set a height for the table element to engage the virtual DOM using the height property in the table constructor.

If there is no height set on the table the Tabluator cannot use the virtual DOM, and the table will be rendered with no scroll bar, taking up as much space as is needed to show all rows at once. In this mode it will be very slow to render large numbers of rows.

Table Visibility

Because Tabulator builds its elements on the fly, it needs to be visible when it is populated with data to be able to make the calculations required to layout the table correctly, because hidden elements have no dimension in the DOM.

If you initialise a table or call the setData function while the table is hidden you may find graphical errors in the table when you next make it visible.

To get round this issue you can call the redraw function on the table when you make it visible, which will force Tabulator to recalculate the layout of all the cells in the table.

Basic Table Setup

This section outlines the process of setting up for your first table in four easy steps.

A demo of basic table setup on a bolierplate HTML page can be found here.

Examples showing how to set up a wide variety of Tabulators features can be found in the Documentation Section.

1 Create your DOM element

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

2 Turn element into a Tabulator by passing a constructor object to the tabulator jQuery widget

//create Tabulator on DOM element with id "example-table"
$("#example-table").tabulator({
    height:205, // set height of table, this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
    layout:"fitColumns", //fit columns to width of table (optional)
    columns:[ //Define Table Columns
        {title:"Name", field:"name", width:150},
        {title:"Age", field:"age", align:"left", formatter:"progress"},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
    ],
    rowClick:function(e, row){ //trigger an alert message when the row is clicked
        alert("Row " + row.getData().id + " Clicked!!!!");
    },
});

3 Load data into your Tabulator

//define some sample data
var tabledata = [
    {id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
    {id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
    {id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
    {id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
    {id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
];

//load sample data into the table
$("#example-table").tabulator("setData", tabledata);

4 SMILE - You are all setup and ready to go!