Version 3.2 Out Now!
Column Calculations, Multi-level Grouping, Touch Events, Nested Data Field Definitions, Header Filter Functions, Scroll Keybindings and much more! Checkout the news article to find out more!
Tabulator allows you to create interactive tables in seconds from any HTML Table, Javascript Array, AJAX data source or JSON formatted data. It comes with a complete set of CSS classes to make styling your tables a doddle.
Simply include the library in your project and you're away!
Instead of telling you about the enormous list of features available with Tabulator, why dont we just let you have a play!
There are a ton of interactive demos for you to check out over on the Examples Page.
<div id="tabulator-example"></div>
$("#tabulator-example").tabulator({
fitColumns:true,
tooltips:true,
addRowPos:"top",
history:true,
pagination:"local",
paginationSize:7,
movableColumns:true,
initialSort:[
{column:"name", dir:"asc"},
],
columns:[
{title:"Name", field:"name", editor:"input"},
{title:"Task Progress", field:"progress", align:"left", formatter:"progress", editor:true},
{title:"Activity", field:"activity", width:160, formatter:lineFormatter, headerSort:false},
{title:"Gender", field:"gender", width:90, editor:genderEditor},
{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:"Car", field:"car", width:80, align:"center", formatter:"tickCross", sorter:"boolean", editor:true},
],
});
Tabulator has an enormous number of features to help customize your experience to your needs.
With new features released every month, there is bound to be something to get your intertactive table juices flowing.
A detailed breakdown of all of the vailable features can be found on the Documentation Page