Setup

Setting up tabulator could not be simpler. After including jQuery and jQueryUI in your project, follow the below steps

Include the library

<script type="text/javascript" src="tabulator.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

Basic Tabulator Definition 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:"320px", // set height of table (optional)
	fitColumns:true, //fit columns to width of table (optional)
	columns:[ //Define Table COlumns
		{title:"Name", field:"name", sorter:"string", width:150},
		{title:"Age", field:"age", sorter:"number", align:"left", formatter:"progress"},
		{title:"Favourite Color", field:"col", sorter:"string", sortable:false},
		{title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
	],
	rowClick:function(e, id, data, row){ //trigger an alert message when the row is clicked
		alert("Row " + 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!

###Live Demo A live demo of tabulator in action can be found here.

###Examples A selection of demo tables can be found in the examples.html file.