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:"Height", field:"height", formatter:"star", align:"center", sorter:"number", width:100},
		{title:"Favourite Color", field:"col", sorter:"string", sortable:false},
		{title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
		{title:"Likes Cheese", field:"cheese", align:"center", formatter:"tickCross", sorter:"boolean"},
	],
	rowClick:function(e, id, data, row){
		alert("Row " + id + " Clicked!!!!"); //trigger an alert message when the row is clicked
	},
});

3. Load data into your Tabulator

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

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