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>

Create an element to hold the table

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

Turn the element into a tabulator with some simple javascript

$("#example-table").tabulator();

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

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.0.0/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.0.0/js/tabulator.min.js"></script>

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

Basic Example

Below is a basic example of a functioning Tabulator setup.

1. Create your DOM element

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

2. Turn element into a Tabulator

//create Tabulator on DOM element with id "example-table"
$("#example-table").tabulator({
    height:320, // set height of table (optional)
    fitColumns:true, //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!