Version 6.2 Released!

Click to checkout the new features

Old Documentation
You are browsing documentation for an old version of Tabulator. Consider upgrading your project to Tabulator 6.2

Release Notes

File Imports

The importer module has seen a couple of updates in this release.

File Reader Format

An optional third argument can now be passed to the import function. This is used to tell Tabulator how to read the file if it is not plain text, a good example of this would be when using the xlsx importer, as this needs to read in data as an array buffer.

table.import("xlsx", ".xlsx", "buffer");

This can be any of the standard import file readers.

Excel Importer

Dependency Required
The XLSX importer requires that the SheetJS Library be included on your site, this can be included with the following script tag.
<script type="text/javascript" src=""></script>

The new xlsx importer will load a Excel and other spreadsheet formatted files into the table.

You can import any standard format spreadsheet (xlsx, csv, ods) into the table. For example download this sample Excel file to your local computer. Then click the button below to load sample data file.

Table Controls
Loading Example...
Source Code


    <button id="file-load-trigger">Choose File</button>

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


//Build Tabulator
var table = new Tabulator("#example-table", {
    placeholder:"Awaiting Data, Please Load File",

//trigger AJAX load on "Load Data via AJAX" button click
document.getElementById("file-load-trigger").addEventListener("click", function(){
    table.import("xlsx", [".xlsx", ".csv", ".ods"], "buffer");

Multi-Tab Spreadsheets
If you are using a multi-sheet spreadsheet then it will always be the first sheet that is imported

Column Headers
Tabulator will treat the first row of the spreadsheet as the column headers

Array Buffer Reader

Unline other importers this importers requires you to use the third argument of the import function to specify that the data be loaded in buffer format:

table.import("xlsx", ".xlsx", "buffer");

Because this importer uses SheetJS to decode the file, it is also possible for it to handle a wide range of standard spreadsheet formats alongside just the xlsx file extension:

table.import("xlsx", [".xlsx", ".csv", ".ods"], "buffer");


Dark Mode Site Theme

A new Site Dark CSS theme has been added to the library. This new theme matches the style of the tables on this website.

To use this new theme, you would need to import the following css file into your project:

<link href="/dist/css/tabulator_site_dark.min.css" rel="stylesheet">
Loading Example...
Source Code


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


var table = new Tabulator("#example-table", {
    {title:"Name", field:"name"},
    {title:"Progress", field:"progress", hozAlign:"right", sorter:"number"},
    {title:"Gender", field:"gender"},
    {title:"Rating", field:"rating", hozAlign:"center"},
    {title:"Favourite Color", field:"col"},
    {title:"Date Of Birth", field:"dob", hozAlign:"center", sorter:"date"},
    {title:"Driver", field:"car", hozAlign:"center"},