Tabulator

The easy to use, fully featured, interactive table JavaScript library

Download v4.1

Version 4.1 Released Tree Data Structures, React Component, Auto Complete Editor, Vertical Column Headers and Much More...

Complex Tables, Simple Code

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript Array, AJAX data source or JSON formatted data.

Simply include the library in your project and you're away!

Head over to the Documentation or Examples pages to get started with Tabulator.

HTML

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

JavaScript

var table = new Tabulator("#example-table", {
	data:tabledata,           //load row data from array
	layout:"fitColumns",      //fit columns to width of table
	responsiveLayout:"hide",  //hide columns that dont fit on the table
	tooltips:true,            //show tool tips on cells
	addRowPos:"top",          //when adding a new row, add it to the top of the table
	history:true,             //allow undo and redo actions on the table
	pagination:"local",       //paginate the data
	paginationSize:7,         //allow 7 rows per page of data
	movableColumns:true,      //allow column order to be changed
	resizableRows:true,       //allow row order to be changed
	initialSort:[             //set the initial sort order of the data
		{column:"name", dir:"asc"},
	],
	columns:[                 //define the table columns
		{title:"Name", field:"name", editor:"input"},
		{title:"Task Progress", field:"progress", align:"left", formatter:"progress", editor:true},
		{title:"Gender", field:"gender", width:95, editor:"select", editorParams:{"Male":"male", "Female":"female"}},
		{title:"Rating", field:"rating", formatter:"star", align:"center", width:100, editor:true},
		{title:"Color", field:"col", width:130, editor:"input"},
		{title:"Date Of Birth", field:"dob", width:130, sorter:"date", align:"center"},
		{title:"Driver", field:"car", width:90,  align:"center", formatter:"tickCross", sorter:"boolean", editor:true},
	],
});

Cross Browser Support

Tabulator supports all major browsers

Tabulator is built to support all modern desktop and mobile web browsers

Framework Support

Tabulator works on all major JS frameworks

Tabulator can be used on all major frontend JavaScript Frameworks

The documentation section contains a Framework Setup Guide to get you started

Extensive Feature Set

Configure your tables to meet the needs of your users

Tabulator has an enormous number of features to help customize your table experience to your needs

With new features released every month, there is bound to be something to get your interactive table juices flowing

A detailed breakdown of all of the available features can be found in the Documentation