Tabulator

Tabulator is a powerful data table library designed for ease of use.

SheetJS is a JavaScript library for reading and writing data from spreadsheets.

Tabulator offers deep integration with SheetJS for importing and exporting data. This demo covers additional detail including document customization.

Click here for a live standalone integration demo.

Tested Deployments

This demo was tested in the following deployments:

Browser	Version	Date
Chromium 125	6.2.1	2024-06-13

Integration Details

The SheetJS Standalone scripts are appropriate for sites that use the Tabulator CDN scripts.

The "Frameworks" section covers installation instructions for projects using a framework.

The Tabulator script must be loaded after the SheetJS scripts!

<!-- Load SheetJS Scripts -->
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/shim.min.js"></script>
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
<!-- Tabulator must be loaded after SheetJS scripts -->
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@6.2.1/dist/js/tabulator.min.js"></script>

Previewing Data

Tabulator offers a special setData method for assigning data after the table is created. Coupled with the autoColumns option, Tabulator will automatically refresh the table.

The library scans the first row object to determine the header labels. If a column is missing a value in the first object, it will not be loaded!

Fetching Files

When files are stored remotely, the recommended approach is to fetch the files, parse with the SheetJS read method, generate arrays of objects from the target sheet using sheet_to_json, and load data with the Tabulator setData method. The following snippet fetches a sample file and loads the first sheet:

Fetching a spreadsheet and Displaying the first worksheet

<!-- Tabulator DIV -->
<div id="htmlout"></div>

<script>
/* Initialize Tabulator with the `autoColumns: true` setting */
var tbl = new Tabulator('#htmlout', { autoColumns: true });

/* fetch and display https://docs.sheetjs.com/pres.numbers */
(function() { try {
  fetch("https://docs.sheetjs.com/pres.numbers")
    .then(function(res) { return res.arrayBuffer(); })
    .then(function(ab) {
      /* parse ArrayBuffer */
      var wb = XLSX.read(ab);
      /* get first worksheet from SheetJS workbook object */
      var ws = wb.Sheets[wb.SheetNames[0]];
      /* generate array of row objects */
      var data = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
      /* update Tabulator */
      tbl.setData(data);
    });
} catch(e) {} })();
</script>

Local Files

Tabulator provides a special import method to show a dialog and load data. Since the importer requires the raw binary data, the method must be called with the third argument set to "buffer":

Parsing a local spreadsheet and Displaying the first worksheet

<button id="imp"><b>Click here to import from XLSX file</b></button>
<!-- Tabulator DIV -->
<div id="htmlout"></div>

<script>
/* Initialize Tabulator with the `autoColumns: true` setting */
var tbl = new Tabulator('#htmlout', { autoColumns: true });

/* use Tabulator SheetJS integration to import data */
document.getElementById("imp").addEventListener("click", function() {
  tbl.import("xlsx", ".xlsx", "buffer");
})
</script>

Saving Data

Tabulator provides a special download method to initiate the export:

Exporting data from Tabulator to XLSX

<input type="submit" value="Export to XLSX!" id="xport" onclick="export_xlsx();">
<!-- Tabulator DIV -->
<div id="htmlout"></div>

<script>
/* Initialize Tabulator with the `autoColumns: true` setting */
var tbl = new Tabulator('#htmlout', { autoColumns: true });

/* use Tabulator SheetJS integration to import data */
function export_xlsx() {
  /* use Tabulator SheetJS integration */
  tbl.download("xlsx", "SheetJSTabulator.xlsx");
}
</script>

The official documentation covers supported options.

Post-processing

The documentProcessing event handler is called after Tabulator generates a SheetJS workbook object. This allows for adjustments before creating the final workbook file. The following example adds a second sheet that includes the date:

Exporting data and metadata

tbl.download("xlsx", "SheetJSTabulator.xlsx", {
  documentProcessing: function(wb) {

    /* create a new worksheet */
    var ws = XLSX.utils.aoa_to_sheet([
      ["SheetJS + Tabulator Demo"],
      ["Export Date:", new Date()]
    ]);

    /* add to workbook */
    XLSX.utils.book_append_sheet(wb, ws, "Metadata");

    return wb;
  }
});