Simple Table

In its simplest form, all you need to set in the options are the column titles and field names.

By default columns are resizable (using edge of column header) and sortable (as strings).

Loading Example...
Source Code

HTML

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

JavaScript

$("#example-table").tabulator({
    height:"311px",
    columns:[
        {title:"Name", field:"name", width:200},
        {title:"Progress", field:"progress", width:100, sorter:"number"},
        {title:"Gender", field:"gender"},
        {title:"Rating", field:"rating", width:80},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob"},
        {title:"Driver", field:"car"},
    ],
});

Fit To Data Documentation

Tables will automatically resize to fit the data

Loading Example...
Source Code

HTML

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

JavaScript

$("#example-table").tabulator({
    height:"311px",
    columns:[
        {title:"Name", field:"name", width:200},
        {title:"Progress", field:"progress", width:100, align:"right", sorter:"number"},
        {title:"Gender", field:"gender"},
        {title:"Rating", field:"rating", align:"center", width:80},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob", align:"center", sorter:"date"},
        {title:"Driver", field:"car", align:"center"},
    ],
});

Fit To Width Documentation

By setting the fitColumns option to true, the table will resize columns so that they fit perfectly inside the width of the container.

If a width is specified on any columns, where possible the columns will be set at this width and other columns will be resized around them. If there is not enough space to fit all the columns in, then all column widths are ignored and they are sized equally.

Loading Example...
Source Code

HTML

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

JavaScript

$("#example-table").tabulator({
    height:"311px",
    fitColumns:true,
    columns:[
        {title:"Name", field:"name", width:200},
        {title:"Progress", field:"progress", align:"right", sorter:"number"},
        {title:"Gender", field:"gender"},
        {title:"Rating", field:"rating", align:"center", width:60},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob", align:"center", sorter:"date"},
        {title:"Driver", field:"car", align:"center"},
    ],
});

Responsive Layout Documentation

By setting the responsiveLayout option to true, the table will automatically hide/show columns to prevent the columns from exceeding the width of container.

If you resize the the width of the window you will see the number of columns change to ensure the data fits with the table. This option can be combined with fitColumns to make a table that gracefully responds to all display widths.

Loading Example...
Source Code

HTML

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

JavaScript

$("#example-table").tabulator({
     height:"311px",
     responsiveLayout:true,
     columns:[
     {title:"Name", field:"name", width:200, responsive:0}, //never hide this column
     {title:"Progress", field:"progress", align:"right", sorter:"number", width:150},
     {title:"Gender", field:"gender", width:150, responsive:2}, //hide this column first
     {title:"Rating", field:"rating", align:"center", width:150},
     {title:"Favourite Color", field:"col", width:150},
     {title:"Date Of Birth", field:"dob", align:"center", sorter:"date", width:150},
     {title:"Driver", field:"car", align:"center", width:150},
     ],
 });

Column Groups Documentation

By creating groups in the column definition array, you can create multi line headers with groups of columns.

You can use the colVertAlign option to set how the text in your columns headers should be vertically aligned.

Loading Example...
Source Code

HTML

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

JavaScript

$("#example-table").tabulator({
    colVertAlign:"bottom", //align header contents to bottom of cell
    columns:[
        {title:"Name", field:"name", width:160},
        {//create column group
            title:"Work Info",
            columns:[
                {title:"Progress", field:"progress", align:"right", sorter:"number", width:100},
                {title:"Rating", field:"rating", align:"center", width:80},
                {title:"Driver", field:"car", align:"center", width:80},
            ],
        },
        {//create column group
            title:"Personal Info",
            columns:[
                {title:"Gender", field:"gender", width:90},
                {title:"Favourite Color", field:"col", width:140},
                {title:"Date Of Birth", field:"dob", align:"center", sorter:"date", width:130},
            ],
        },
    ],
});

Frozen Columns Documentation

You can use the frozen property in a columns definition object to freeze that column in place during horizontal scrollling.

Loading Example...
Source Code

HTML

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

JavaScript

$("#example-table-column").tabulator({
    height:"311px",
    columns:[
        {title:"Name", field:"name", width:250, frozen:true}, //frozen column
        {title:"Progress", field:"progress", sorter:"number", align:"left", formatter:"progress", width:200,  editable:true},
        {title:"Gender", field:"gender", width:150},
        {title:"Rating", field:"rating",  formatter:"star", align:"center", width:200},
        {title:"Date Of Birth", field:"dob", align:"center", sorter:"date"},
        {title:"Driver", field:"car", align:"center", formatter:"tickCross", width:150},
    ],
});

Create from HTML Table Element Documentation

It is possible to convert a standard HTML Table element into a tabulator, pulling all the data directly from the table into the tabulator when it is created.

If you want to pull the column headers in from the table, you need to make sure that you have defiend a thead element with each column header in a th element. If you specify the width attribute on a header, then this will be set as the width of the column in the tabulator.

You can set any of the standard Tabulator options when you create your table this way, so can easily convert old tables to take advantage of the many features Tabulator has to offer.

Standard HTML Table:

Name Age Gender Height Favourite Color Date of Birth
Billy Bob 12 male 1 red 22/04/1994
Mary May 1 female 2 blue 14/05/1982

Converted to Tabulator:

Name Age Gender Height Favourite Color Date of Birth
Billy Bob 12 male 1 red 22/04/1994
Mary May 1 female 2 blue 14/05/1982
Source Code

HTML

<table id="example-table">
    <thead>
        <tr>
            <th width="200">Name</th>
            <th tabulator-align="center">Age</th>
            <th>Gender</th>
            <th>Height</th>
            <th width="150">Favourite Color</th>
            <th>Date of Birth</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Billy Bob</td>
            <td>12</td>
            <td>male</td>
            <td>1</td>
            <td>red</td>
            <td>22/04/1994</td>
        </tr>
        <tr>
            <td>Mary May</td>
            <td>1</td>
            <td>female</td>
            <td>2</td>
            <td>blue</td>
            <td>14/05/1982</td>
        </tr>
    </tbody>
</table>

JavaScript

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

Editable Data Documentation

Using the editable setting on each column, you can make a user editable table.

Any time a cell is edited it triggers the cellEdited callback, to allow you to process any changes.

You can call the getData method to get an array of all of the tables data, including any edits

Loading Example...
Source Code

HTML

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

JavaScript

//Create Gender
var genderEditor = function(cell, value){
//cell - JQuery object for current cell
//value - the current value for current cell

//create and style editor
var editor = $("<select><option value=''></option><option value='male'>male</option><option value='female'>female</option></select>");
editor.css({
    "padding":"3px",
    "width":"100%",
    "box-sizing":"border-box",
})

//Set value of editor to the value of the cell
.val(value);

//set focus on the select box when the editor is selected 
if(cell.hasClass("tabulator-cell")){
    setTimeout(function(){
        editor.focus();
    },100);
}

//when the value has been set, update the cell
editor.on("change blur", function(e){
    cell.trigger("editval", editor.val());
});

//return the editor element
    return editor;
}

//Build Tabulator
$("#example-table").tabulator({
    height:"311px",
    columns:[
        {title:"Name", field:"name", width:150, editable:true},
        {title:"Progress", field:"progress", sorter:"number", align:"left", formatter:"progress", width:200,  editable:true},
        {title:"Gender", field:"gender", editable:true, editor:genderEditor},
        {title:"Rating", field:"rating",  formatter:"star", align:"center", width:100, editable:true},
        {title:"Date Of Birth", field:"dob", align:"center", sorter:"date", editable:true},
        {title:"Driver", field:"car", align:"center", editable:true, formatter:"tickCross"},
    ],
    cellEdited:function(id,data,row){
        //This callback is called any time a cell is edidted
    },
});

Sorters Documentation

Sorting is enabled by default, and can be toggled on or off by column using the sortable option.

By default all columns are sorted as text, different sort functions can be set using the sorter option

  • string - sorts column as strings of characters
  • number - sorts column as numbers (integer or float, will also handle numbers using "," separators)
  • alphanum - sorts column as alpha numeric code
  • boolean - sorts column as booleans
  • date - sorts column as dates (for this you will need to set the date format using the dateFormat option when you create your table. default format is "dd/mm/yyyy")

You can define a custom sorter functions in the sorter option if you need bespoke sorting functionality.

You can programmatically trigger a sort using the sort function.

Programmatic Sort Parameters

Loading Example...
Source Code

HTML

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

JavaScript

//Build Tabulator
$("#example-table").tabulator({
    height:"311px",
    fitColumns:true,
    columns:[
        {title:"Name", field:"name", sorter:"string", width:200},
        {title:"Progress", field:"progress", sorter:"number", align:"right", sorter:"number"},
        {title:"Gender", field:"gender", sorter:"string"},
        {title:"Rating", field:"rating",  align:"center", width:100},
        {title:"Favourite Color", field:"col", sortable:false, sorter:function(a,b){
            return String(a).toLowerCase().localeCompare(String(b).toLowerCase());
        }},
        {title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
        {title:"Driver", field:"car", align:"center", sorter:"boolean"},
    ],
});

//Trigger sort when "Trigger Sort" button is clicked
$("#sort-trigger").click(function(){
    $("#example-table").tabulator("sort", $("#sort-field").val(), $("#sort-direction").val());
});

Formatters Documentation

Tabulator allows you to format your data in a wide variety of ways, so your tables can display information in a more graphical and clear layout.

you can set formatters on a per column basis using the formatter option in the column data.

Tabulator comes with a number of preconfigured formatters including:

  • money - formats a number into a currency notation (eg. 1234567.8901 -> 1,234,567.89)
  • email - renders data as an anchor with a mailto: link to the given value
  • link - renders data as an anchor with a link to the given value
  • tick - displays a green tick if the value is (true|'true'|'True'|1) and an empty cell if not
  • tickCross - displays a green tick if the value is (true|'true'|'True'|1) and a red cross if not
  • color - sets the background color of the cell to the value. Can be any valid css colour eg. #ff0000, #f00, rgb(255,0,0), red, rgba(255,0,0,0), hsl(0, 100%, 50%)
  • star - displays a graphical 0-5 star rating based on integer values from 0-5
  • progress - displays a progress bar that fills the cell from left to right, using values 0-100 as a percentage of width
  • buttonTick - displays a tick icon on each row (for use as a button)
  • buttonCross - displays a cross icon on each row (for use as a button)
  • rownum - shows an incrementing row number for each row.

You can define a custom formatter function in the formatter option if you need more bespoke formatter functionality

You can create icon/button columns, by not specifying a field parameter in the column data and creating a custom formatter for the column contents. In the example below we have created a print button on the left of each row.

You can also set a row formatter using the rowFormatter option, this allows you to format the styling of the row as a whole

Loading Example...
Source Code

HTML

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

JavaScript

//Generate print icon
var printIcon = function(value, data, cell, row, options){ //plain text value
    return "<i class='fa fa-print'></i>";
};

//Build Tabulator
$("#example-table").tabulator({
    height:"311px",
    fitColumns:true,
    rowFormatter:function(row, data){
        if(data.col == "blue"){
            row.css({"background-color":"#A6A6DF"});
        }
    },
    columns:[
        {formatter:"rownum", align:"center", width:40},
        {formatter:printIcon, width:40, align:"center", onClick:function(e, cell, val, data){alert("Printing row data for: " + data.name)}},
        {title:"Name", field:"name", width:200, formatter:function(value, data, cell, row, options){
            if(value.indexOf("o") > 0){
                return "<span style='color:#3FB449; font-weight:bold;'>" + value + "</span>";
            }else{
                return value;
            }
        }},
        {title:"Progress", field:"progress", formatter:"progress", sorter:"number"},
        {title:"Gender", field:"gender"},
        {title:"Rating", field:"rating", formatter:"star", formatterParams:{stars:6}, align:"center", width:120},
        {title:"Driver", field:"car", align:"center", formatter:"tickCross"},
        {title:"Favourite Color", field:"col" ,formatter:"color", width:100},
        {title:"Date Of Birth", field:"dob", align:"center", sorter:"date"},
        {formatter:"buttonCross", width:30, align:"center"},
    ],
});

Row Formatter Documentation

If you are looking for a non grid based format to your table then you can use a row formatter to create custom row layouts.

You can use the rowFormatter callback to replace the contents of the row with any layout you like. In this example we will create a simple table in each row containing and image and some vertically centered text properties.

When replacing the entire contents of the row it is important to include only one column in your column definition array to ensure the table renders correctly. It is also advisable to enable fitColumns and disabled colResizable options.

Loading Example...
Source Code

CSS

/*Style row formatter contents*/
#example-table .tabulator-row table{
    vertical-align: middle;
    border-collapse:collapse;
}

#example-table .tabulator-row table img{
    border:2px solid #ccc;
}

#example-table .tabulator-row table tr td{
     border:none;
}

#example-table .tabulator-row table tr td:first-of-type{
    width:60px;
}

#example-table .tabulator-row table tr td div{
    padding:5px;
}

JavaScript

//Define some test data
var cheeseData = [
    {id:1, type:"Brie", rind:"mould", age:"4 weeks", color:"white", image:"brie.jpg"},
    {id:2, type:"Cheddar", rind:"none", age:"1 year", color:"yellow", image:"cheddar.jpg"},
    {id:3, type:"Gouda", rind:"wax", age:"6 months", color:"cream", image:"gouda.jpg"},
    {id:4, type:"Swiss", rind:"none", age:"9 months", color:"yellow", image:"swiss.jpg"},
]

//define Tabulator
$("#example-table").tabulator({
    height:"311px",
    fitColumns:true,
    colResizable:false,
    columns:[
        {title:"Cheese", field:"type", sorter:"string"},
    ],
    rowFormatter:function(row, data){
        //get current width of row
        var width = row.outerWidth();

        //clear current row data
        row.empty();

        //define a table layout structure and set width of row
        var table = $("<table style='width:" + (width - 18) + "px;'><tr></tr></table>");

        //add image on left of row
        $("tr", table).append("<td><img src='/sample_data/row_formatter/" + data.image + "'></td>");

        //add row data on right hand side
        $("tr", table).append("<td><div><strong>Type:</strong> " + data.type + "</div><div><strong>Age:</strong> " + data.age + "</div><div><strong>Rind:</strong> " + data.rind + "</div><div><strong>Colour:</strong> " + data.color + "</div></td>");

        //append newly formatted contents to the row
        row.append(table);
    },
})

//Load Data
$("#example-table").tabulator("setData", cheeseData);

Sparklines

You can use external JavaScript libraries in any of your formatters. In this example we will use the popular sparklines.js library.

We will be passing an array of values into a field and then using a custom formatter to turn this array into a sparkline.

The Sparklines library can be downloaded from Git Hub.

Loading Example...
Source Code

HTML

<!-- Include sparkline library -->
<script src="sparkline.js"></script>

<!-- Element to hold Tabulator -->
<div id="example-table"></div>

JavaScript

//Formatter to generate line chart
var lineFormatter = function(value, data, cell, row, options){
    setTimeout(function(){ //give cell enough time to be added to the DOM before calling sparkline formatter
        cell.sparkline(value, {width:"100%", type:"line"});
    }, 10);
};

//Formatter to generate bar chart
var barFormatter = function(value, data, cell, row, options){
    setTimeout(function(){ //give cell enough time to be added to the DOM before calling sparkline formatter
        cell.sparkline(value, {width:"100%", type:"bar", barWidth:14});
    }, 10);
};

//Formatter to generate tristart chart
var tristateFormatter = function(value, data, cell, row, options){
    setTimeout(function(){ //give cell enough time to be added to the DOM before calling sparkline formatter
        cell.sparkline(value, {width:"100%", type:"tristate", barWidth:14});
    }, 10);
};


//Formatter to generate box plot
var boxFormatter = function(value, data, cell, row, options){
    setTimeout(function(){ //give cell enough time to be added to the DOM before calling sparkline formatter
        cell.sparkline(value, {width:"100%", type:"box"});
    }, 10);
};

//Sample Data with array values for graph fields
var sparkData = [
    {id:1, name:"Oli Bob", line:[1, 20, 5, 3, 10, 13, 17, 15, 9, 11], bar:[1, 20, 5, 3, 10, 13, 17, 15, 9, 11], tristate:[1, 20, -5, -3, 10, 13, 0, 15, 9, 11], box:[1, 20, 5, 3, 10, 13, 17, 15, 9, 11]},
    {id:2, name:"Mary May", line:[10, 12, 14, 16, 13, 9, 7, 11, 10, 13], bar:[10, 12, 14, 16, 13, 9, 7, 11, 10, 13], tristate:[-10, 12, 14, 16, 13, 9, 7, 0, 10, 13], box:[10, 12, 14, 16, 13, 9, 7, 11, 10, 13]},
    {id:3, name:"Christine Lobowski", line:[1, 2, 5, 4, 1, 16, 4, 2, 1, 3], bar:[1, 2, 5, 4, 1, 16, 4, 2, 1, 3], tristate:[1, 2, 5, 0, 1, 16, 4, 2, 1, 3], box:[1, 2, 5, 4, 1, 16, 4, 2, 1, 3]},
    {id:4, name:"Brendon Philips", line:[3, 7, 9, 1, 4, 8, 2, 6, 4, 2], bar:[3, 7, 9, 1, 4, 8, 2, 6, 4, 2], tristate:[3, 7, 9, 1, 4, 8, 2, 6, 4, 2], box:[3, 7, 9, 1, 4, 8, 2, 6, 4, 2]},
    {id:5, name:"Margret Marmajuke", line:[1, 3, 1, 3, 3, 1, 1, 3, 1, 3], bar:[1, 3, 1, 3, 3, 1, 1, 3, 1, 3], tristate:[1, -3, 1, 3, -3, 1, -1, 3, 1, 3], box:[1, 3, 1, 3, 3, 1, 1, 3, 1, 3]},
    {id:6, name:"Frank Harbours", line:[20, 17, 15, 11, 16, 9, 12, 14, 20, 12], bar:[20, 17, 15, 11, 16, 9, 12, 14, 20, 12], tristate:[20, 17, 15, 11, 16, -9, 12, 14, 20, 12], box:[20, 17, 15, 11, 16, 9, 12, 14, 20, 12]},
    {id:7, name:"Jamie Newhart", line:[11, 7, 6, 12, 14, 13, 11, 10, 9, 6], bar:[11, 7, 6, 12, 14, 13, 11, 10, 9, 6], tristate:[11, 7, 6, -12, 1-13, 11, 10, 9, 6], box:[11, 7, 6, 12, 14, 13, 11, 10, 9, 6]},
    {id:8, name:"Gemma Jane", line:[4, 17, 11, 12, 0, 5, 12, 14, 18, 11], bar:[4, 17, 11, 12, 0, 5, 12, 14, 18, 11], tristate:[4, 17, 11, -12, 0, 5, 12, -14, 18, 11], box:[4, 17, 11, 12, 0, 5, 12, 14, 18, 11]},
    {id:9, name:"Emily Sykes", line:[11, 15, 19, 20, 17, 16, 16, 5, 3, 2], bar:[11, 15, 19, 20, 17, 16, 16, 5, 3, 2], tristate:[11, 15, 19, -20, 17, 16, 16, -5, 3, 2], box:[11, 15, 19, 20, 17, 16, 16, 5, 3, 2]},
    {id:10, name:"James Newman", line:[1, 2, 3, 4, 5, 4, 2, 5, 9, 8], bar:[1, 2, 3, 4, 5, 4, 2, 5, 9, 8], tristate:[1, 2, 0, -4, -5, -4, 2, 5, 9, 8], box:[1, 2, 3, 4, 5, 4, 2, 5, 9, 8]},
];


//Table Constructor
$("#example-table").tabulator({
    height:"311px",
    columns:[
        {title:"Name", field:"name", width:190},
        {title:"Line Chart", field:"line", width:160, formatter:lineFormatter},
        {title:"Bar Chart", field:"bar", width:160, formatter:barFormatter},
        {title:"Tristate Chart", field:"tristate", width:160, formatter:tristateFormatter},
        {title:"Box Plot", field:"box", width:160, formatter:boxFormatter},
    ],
});

Grouping Data Documentation

You can group rows together using the groupBy option. To group by a field, set this option to the name of the field.

To group by more complex operations you should pass a function that returns a string that represents the group.

Loading Example...
Source Code

HTML

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

JavaScript

$("#example-table").tabulator({
    height:"311px",
    fitColumns:true,
    groupBy:"gender",
    columns:[
        {title:"Name", field:"name", width:200},
        {title:"Progress", field:"progress", formatter:"progress", sorter:"number"},
        {title:"Gender", field:"gender"},
        {title:"Rating", field:"rating", formatter:"star", align:"center", width:100},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob", align:"center", sorter:"date"},
        {title:"Driver", field:"car", align:"center", formatter:"tickCross"},
    ],
});

Filter Data Documentation

Tabulator allows you to filter the table data by any field in the data set.

To set a filter you need to call the setFilter method, passing the field you wish to filter, the comparison type and the value to filter for

Tabulator comes with a number of filter comparison types including:

  • = - Displays only rows with data that is the same as the filter
  • < - displays rows with a value less than the filter value
  • <= - displays rows with a value less than or qual to the filter value
  • > - displays rows with a value greater than the filter value
  • >= - displays rows with a value greater than or qual to the filter value
  • != - displays rows with a value that is not equal to the filter value
  • like - displays any rows with data that contains the specified string anywhere in the specified field. (case insensitive)

Filter Parameters

Loading Example...
Source Code

HTML

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

JavaScript

//Custom filter example
function customFilter(data){
    return data.car && data.rating < 3;
}

//Trigger setFilter function with correct parameters
function updateFilter(){

    var filter = $("#filter-field").val() == "function" ? customFilter : $("#filter-field").val();

    if($("#filter-field").val() == "function" ){
        $("#filter-type").prop("disabled", true);
        $("#filter-value").prop("disabled", true);
    }else{
        $("#filter-type").prop("disabled", false);
        $("#filter-value").prop("disabled", false);
    }

    $("#example-table").tabulator("setFilter", filter, $("#filter-type").val(), $("#filter-value").val());
}

//Update filters on value change
$("#filter-field, #filter-type").change(updateFilter);
$("#filter-value").keyup(updateFilter);

//Clear filters on "Clear Filters" button click
$("#filter-clear").click(function(){
    $("#filter-field").val("");
    $("#filter-type").val("=");
    $("#filter-value").val("");

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

//Build Tabulator
$("#example-table").tabulator({
    height:"311px",
    fitColumns:true,
    columns:[
        {title:"Name", field:"name", width:200},
        {title:"Progress", field:"progress", formatter:"progress", sorter:"number"},
        {title:"Gender", field:"gender"},
        {title:"Rating", field:"rating", formatter:"star", align:"center", width:100},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob", align:"center", sorter:"date"},
        {title:"Driver", field:"car", align:"center", formatter:"tickCross"},
    ],
});

Filter Data In Header Documentation

By settting the headerFilter parameter for a column you can add column based filtering directly into your table.

See the documentation for Header Filtering for more information.

Loading Example...
Source Code

HTML

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

JavaScript

$("#example-table").tabulator({
    height:"311px",
    fitColumns:true,
    columns:[
        {title:"Name", field:"name", width:150, headerFilter:true},
        {title:"Progress", field:"progress", formatter:"progress", sorter:"number", headerFilter:"number"},
        {title:"Gender", field:"gender", editor:genderEditor, headerFilter:true},
        {title:"Rating", field:"rating", editor:"star", align:"center", width:100, headerFilter:"number"},
        {title:"Favourite Color", field:"col", headerFilter:true},
        {title:"Date Of Birth", field:"dob", align:"center", sorter:"date", headerFilter:true},
        {title:"Driver", field:"car", align:"center", formatter:"tickCross", headerFilter:true},
    ],
});

Pagination Documentation

Tabulator allows you to paginate your data. simply set the pagination property to true.

If you have set the height of the table then the data will be automatically paginated to fit within the table.

If you wish to define how many rows should be shown on a page, set this in the paginationSize property. If you set the paginationSize without setting the height, the Tabulator will automatically resize to fit the data

Loading Example...
Source Code

HTML

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

JavaScript

//Build Tabulator
$("#example-table").tabulator({
    height:"292px",
    fitColumns:true,
    pagination:"local",
    paginationSize:8,
    columns:[
        {title:"Name", field:"name", width:200},
        {title:"Progress", field:"progress", formatter:"progress", sorter:"number"},
        {title:"Gender", field:"gender"},
        {title:"Rating", field:"rating", formatter:"star", align:"center", width:100},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob", align:"center", sorter:"date"},
        {title:"Driver", field:"car", align:"center", formatter:"tickCross"},
    ],
});

//Set initial page
$("#example-table").tabulator("setPage", 1);

Persistent Column Layout Documentation

Tabulator can store the layout of columns in a cookie so that each time a user comes back to the page the table is laid out just as they left it.

Try resizing (drag the right edge of a column header) or rearranging (drag the middle of a column header) the columns of this table, then refresh the page. your new layout will persist.

Loading Example...
Source Code

HTML

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

JavaScript

$("#example-table").tabulator({
    height:"311px",
    movableCols:true,
    persistentLayout: true,
    persistentLayoutID:"examplePerststance",
    columns:[
        {title:"Name", field:"name", width:200},
        {title:"Progress", field:"progress", width:100, sorter:"number"},
        {title:"Gender", field:"gender"},
        {title:"Rating", field:"rating", width:80},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob", align:"center", sorter:"date"},
        {title:"Driver", field:"car", align:"center", formatter:"tickCross"},
    ],
});

AJAX Data Loading Documentation

Data can be loaded into the table from a remote URL using a JSON formatted string.

If you always request the same URL for your data then you can set it in the ajaxURL option when you create your Tabulator

Click the button below to load sample data via AJAX (you will need PHP enabled on your webserver for this to work).

AJAX Controls
Loading Example...
Source Code

HTML

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

JavaScript

//Build Tabulator
$("#example-table").tabulator({
    height:"311px",
    fitColumns:true,
    ajaxURL:"/sample_data/ajax/data.json",
    columns:[
        {title:"Name", field:"name", sorter:"string", width:200},
        {title:"Progress", field:"progress", sorter:"number", align:"right", formatter:"progress"},
        {title:"Gender", field:"gender", sorter:"string"},
        {title:"Rating", field:"rating", formatter:"star", align:"center", width:100},
        {title:"Favourite Color", field:"col", sorter:"string", sortable:false},
        {title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
        {title:"Driver", field:"car", align:"center", formatter:"tickCross", sorter:"boolean"},
    ],
});

//trigger AJAX load on "Load Data via AJAX" button click
$("#ajax-trigger").click(function(){
    $("#example-table").tabulator("setData");
});

Server Side PHP

//build data array
$data = [
    [id=>1, name=>"Billy Bob", age=>"12", gender=>"male", height=>1, col=>"red", dob=>"", cheese=>1],
    [id=>2, name=>"Mary May", age=>"1", gender=>"female", height=>2, col=>"blue", dob=>"14/05/1982", cheese=>true],
    [id=>3, name=>"Christine Lobowski", age=>"42", height=>0, col=>"green", dob=>"22/05/1982", cheese=>"true"],
    [id=>4, name=>"Brendon Philips", age=>"125", gender=>"male", height=>1, col=>"orange", dob=>"01/08/1980"],
    [id=>5, name=>"Margret Marmajuke", age=>"16", gender=>"female", height=>5, col=>"yellow", dob=>"31/01/1999"],
];

//return JSON formatted data
echo(json_encode($data));

Selectable Rows Documentation

Using the selectable option, you can allow users to select rows in the table via a number of different routes:

  • Clicking on a row, to toggle its state.
  • Holding down the shift key and click dragging over a number of rows to toggle the state of all rows the cursor passes over.
  • Programmatically with the selectRow and deselectRow functions.

Selection Controls
Selected: 0
Loading Example...
Source Code

HTML

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

JavaScript

//Build Tabulator
$("#example-table").tabulator({
    height:"311px",
    selectable:true, //make rows selectable
    columns:[
	    {title:"Name", field:"name", width:200},
	    {title:"Progress", field:"progress", width:100, align:"right", sorter:"number"},
	    {title:"Gender", field:"gender", width:100},
	    {title:"Rating", field:"rating", align:"center", width:80},
	    {title:"Favourite Color", field:"col"},
	    {title:"Date Of Birth", field:"dob", align:"center", sorter:"date"},
	    {title:"Driver", field:"car", align:"center", width:100},
    ],
    rowSelectionChanged:function(data, rows){
        //update selected row counter on selection change
    	$("#select-stats span").text(data.length);
    },
});

//select row on "select" button click
$("#select-row").click(function(){
    $("#example-table").tabulator("selectRow", 1);
});

//deselect row on "deselect" button click
$("#deselect-row").click(function(){
    $("#example-table").tabulator("deselectRow", 1);
});

//select row on "select all" button click
$("#select-all").click(function(){
    $("#example-table").tabulator("selectRow");
});

//deselect row on "deselect all" button click
$("#deselect-all").click(function(){
    $("#example-table").tabulator("deselectRow");
});

Add / Delete Rows Documentation

Tablulator allows you to add new rows, delete existing rows and clear all table data with ease.

Row Controls
Loading Example...
Source Code

HTML

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

JavaScript

//Build Tabulator
$("#example-table").tabulator({
    height:"311px",
    addRowPos:"bottom",
    columns:[
        {title:"Name", field:"name", width:200, editable:true},
        {title:"Progress", field:"progress", width:100, align:"right", sorter:"number", editable:true},
        {title:"Gender", field:"gender", editable:true},
        {title:"Rating", field:"rating", align:"center", width:80, editable:true},
        {title:"Favourite Color", field:"col", editable:true},
        {title:"Date Of Birth", field:"dob", align:"center", sorter:"date", editable:true},
        {title:"Driver", field:"car", align:"center", editable:true},
    ],
});

//Add row on "Add Row" button click
$("#add-row").click(function(){
    $("#example-table").tabulator("addRow");
});

//Delete row on "Delete Row" button click
$("#del-row").click(function(){
    $("#example-table").tabulator("deleteRow", 1);
});

//Clear table on "Empty the table" button click
$("#clear").click(function(){
    $("#example-table").tabulator("clear");
});

//Reset table contents on "Reset the table" button click
$("#reset").click(function(){
    $("#example-table").tabulator("setData", tabledata);
});

Movable Rows Documentation

Using the movableRows parameter you can allow the user to move rows around the table using the handle on the left-hand side of the row.

Loading Example...
Source Code

HTML

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

JavaScript

$("#example-table").tabulator({
    height:"311px",
    movableRows:true,
    columns:[
        {title:"Name", field:"name", width:200},
        {title:"Progress", field:"progress", formatter:"progress", sorter:"number"},
        {title:"Gender", field:"gender"},
        {title:"Rating", field:"rating", formatter:"star", formatterParams:{stars:6}, align:"center", width:120},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob", align:"center", sorter:"date"},
        {title:"Driver", field:"car", align:"center", formatter:"tickCross"},
    ],
    rowMoved:function(id,data,row,index){
        alert("Row: " + data.name + " has been moved to position " + index)
    }
});

Download Table Data Documentation

Tabulator allows you to download the table data as a file directly from your browser, no server needed.

The download will contain the text values of all data currently visible in the table, matching the current column layout, column titles, sorting and filtering.

Download Controls
Loading Example...
Source Code

HTML

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

JavaScript

//Build Tabulator
$("#example-table").tabulator({
    height:"311px",
    movableCols:true,
    columns:[
        {title:"Name", field:"name", width:200},
        {title:"Progress", field:"progress", width:100, sorter:"number"},
        {title:"Gender", field:"gender"},
        {title:"Rating", field:"rating", width:80},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob", align:"center", sorter:"date"},
        {title:"Driver", field:"car", align:"center", formatter:"tickCross"},
    ],
});

//trigger download of data.csv file
$("#download-csv").click(function(){
    $("#example-table").tabulator("download", "csv", "data.csv");
});

//trigger download of data.json file
$("#download-json").click(function(){
    $("#example-table").tabulator("download", "json", "data.json");
});

Localization Documentation

You can localize the content of your tables to meet the needs of your regional users. Any number of language options can be configured for column headers and pagination controls.

Language Controls
Loading Example...
Source Code

HTML

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

JavaScript

//Build Tabulator
$("#example-table").tabulator({
    height:"311px",
    fitColumns:true,
    pagination:true,
    langs:{
        "fr-fr":{ //French language definition
            "columns":{
                "name":"Nom",
                "progress":"Progression",
                "gender":"Genre",
                "rating":"Évaluation",
                "col":"Couleur",
                "dob":"Date de Naissance",
                "car":"Voiture",
            },
            "pagination":{
                "first":"Premier",
                "first_title":"Premier Page",
                "last":"Dernier",
                "last_title":"Dernier Page",
                "prev":"Précédent",
                "prev_title":"Précédent Page",
                "next":"Prochain",
                "next_title":"Prochain Page",
            },
        },
        "de-de":{ //German language definition
            "columns":{
                "name":"Name",
                "progress":"Fortschritt",
                "gender":"Genre",
                "rating":"Geschlecht",
                "col":"Farbe",
                "dob":"Geburtsdatum",
                "car":"Auto",
            },
            "pagination":{
                "first":"Zuerst",
                "first_title":"Zuerst Seite",
                "last":"Last",
                "last_title":"Letzte Seite",
                "prev":"Zurück",
                "prev_title":"Zurück Seite",
                "next":"Nächster",
                "next_title":"Nächster Seite",
            },
        },
    },
    columns:[
        {title:"Name", field:"name", width:200},
        {title:"Progress", field:"progress", width:100, sorter:"number"},
        {title:"Gender", field:"gender"},
        {title:"Rating", field:"rating", width:80},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob"},
        {title:"Driver", field:"car"},
    ],
});

//set locale to French
$("#lang-french").click(function(){
    $("#example-table").tabulator("setLocale", "fr-fr");
});

//set locale to German
$("#lang-german").click(function(){
    $("#example-table").tabulator("setLocale", "de-de");
});

//set default locale
$("#lang-default").click(function(){
    $("#example-table").tabulator("setLocale", "");
});

Callbacks Documentation

Tabulator features a range of callbacks to allow you to handle user interaction.

  • Cell Click - The cell click callback is triggered when a user left clicks on a cell, it can be set on a per column basis using the onClick option in the columns data. (left click any cell in the gender column in this example)
  • Row Click - The row click callback is triggered when a user clicks on a row, it can be set globally, by setting therowClickoption when you create your Tabulator. (left click any row in this example)
  • Row Context Menu - The row context callback is triggered when a user right clicks on a row, it can be set globally, by setting the rowContext option when you create your Tabulator. (right click any row in this example)
  • Data Loaded - The data loaded callback is triggered when a new set of data is loaded into the table, it can be set globally, by setting the dataLoaded option when you create your
Loading Example...
Source Code

HTML

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

JavaScript

$("#example-table").tabulator({
    height:"311px",
    fitColumns:true,
    columns:[
        {title:"Name", field:"name", sorter:"string", width:150},
        {title:"Progress", field:"progress", sorter:"number", align:"right", formatter:"progress"},
        {title:"Gender", field:"gender", width:100, sorter:"string", onClick:function(e, cell, val, data){alert("cell clicked - " + val)}},
        {title:"Rating", field:"rating", formatter:"star", align:"center", width:100},
        {title:"Favourite Color", field:"col", sorter:"string", sortable:false},
        {title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
        {title:"Driver", field:"car", align:"center", formatter:"tickCross", sorter:"boolean"},
    ],
    rowClick:function(e, id, data, row){
        alert("Row " + id + " Clicked!!!!")
    },
    rowContext:function(e, id, data, row){
        alert("Row " + id + " Context Clicked!!!!")
    },
});

Theming Documentation

Tabulator is styled using a full set of CSS classes, making theming of the table very simple. A full list of these can be found here.

A LESS file is also provided, containing a set of variables to make generating your own theme even easier. This can be found in tabulator.less

Tabulator comes with a number of packaged themes in the /themes directory of the package. To use one of these simply include the matching css file instead of the default tabulator.css

Simple Theme

A plain, simplistic layout showing only basic grid lines. This can be found in /themes/tabulator_simple.css

Loading Example...
Source Code

HTML

<link href="/themes/tabulator_simple.css" rel="stylesheet">

Midnight Theme

A dark, stylish layout using simple shades of grey. This can be found in /themes/tabulator_midnight.css

Loading Example...
Source Code

HTML

<link href="/themes/tabulator_midnight.css" rel="stylesheet">

Modern Theme

A neat, stylish layout using one primary color. This color can be set in the @primary variable in the /themes/tabulator_modern.less file to alter the style to match your colour scheme. This can be found in /themes/tabulator_modern.css

Loading Example...
Source Code

HTML

<link href="/themes/tabulator_modern.css" rel="stylesheet">

Autumn Theme

A colorful, bright layout using shades of orange and brown. This can be found in /themes/tabulator_autumn.css

Loading Example...
Source Code

HTML

<link href="/themes/tabulator_autumn.css" rel="stylesheet">

Bootstrap Theme

Match Tabulator to the standard Bootstrap theme /themes/bootstrap/tabulator_bootstrap.css

Loading Example...
Source Code

HTML

<link href="/themes/bootstrap/tabulator_bootstrap.css" rel="stylesheet">

Semantic UI Theme

Match Tabulator to the standard Semantic UI theme /themes/semantic-ui/tabulator_semantic-ui.css

Loading Example...
Source Code

HTML

<link href="/themes/semantic-ui/tabulator_semantic-ui.css" rel="stylesheet">

Manually Adjusted Theme

You can override the default tabulator styling in document, or simply edit the provided tabulator.css file to make your own custom theme.

Loading Example...
Source Code

HTML

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

CSS

/*Theme the Tabulator element*/
#example-table-theme{
    background-color:#ccc;
    border: 1px solid #333;
    border-radius: 10px;
}

/*Theme the header*/
#example-table-theme .tabulator-header {
    background-color:#333;
    color:#fff;
}

/*Allow column header names to wrap lines*/
#example-table-theme .tabulator-header .tabulator-col,
#example-table-theme .tabulator-header .tabulator-col-row-handle {
    white-space: normal;
}

/*Color the table rows*/
#example-table-theme .tabulator-tableHolder .tabulator-table .tabulator-row{
    color:#fff;
    background-color: #666;
}

/*Color even rows*/
    #example-table-theme .tabulator-tableHolder .tabulator-table .tabulator-row:nth-child(even) {
    background-color: #444;
}

JavaScript

$("#example-table-theme").tabulator({
    height:"331px",
    fitColumns:true,
    tooltipsHeader: false,
    columns:[
        {title:"Name", field:"name", sorter:"string", width:150},
        {title:"Progress", field:"progress", sorter:"number", align:"right", formatter:"progress"},
        {title:"Gender", field:"gender", width:100, sorter:"string", onClick:function(e, cell, val, data){alert("cell clicked - " + val)}},
        {title:"Rating", field:"rating", formatter:"star", align:"center", width:100},
        {title:"Favourite Color", field:"col", width:100, sorter:"string", sortable:false},
        {title:"Date Of Birth", field:"dob", width:100, sorter:"date", align:"center"},
        {title:"Driver", field:"car", align:"center", formatter:"tickCross", sorter:"boolean"},
    ],
    rowClick:function(e, id, data, row){
        alert("Row " + id + " Clicked!!!!")
    },
    rowContext:function(e, id, data, row){
        alert("Row " + id + " Context Clicked!!!!")
    },
});