Release Notes

• File Imports
• Themes

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

<script type="text/javascript" src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"></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.

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

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

//Build Tabulator
var table = new Tabulator("#example-table", {
    height:311,
    layout:"fitColumns",
    autoColumns:true,
    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");

Themes

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">

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

var table = new Tabulator("#example-table", {
    height:"311px",
    columns:[
    {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"},
    ],
});