---
title: Tabulator
pagination_prev: demos/frontend/index
pagination_next: demos/net/index
---

import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';

[Tabulator](https://tabulator.info/) is a powerful data table library designed
for ease of use.

[SheetJS](https://sheetjs.com) 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.](pathname:///tabulator/)

:::note 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](/docs/getting-started/installation/standalone)
are appropriate for sites that use the Tabulator CDN scripts.

[The "Frameworks" section](/docs/getting-started/installation/frameworks) covers
installation instructions for projects using a framework.

:::info pass

**The Tabulator script must be loaded after the SheetJS scripts!**

```html
<!-- 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.

:::info pass

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:

```html title="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"`:

```html title="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:

```html title="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](https://tabulator.info/docs/6.2/download#xlsx)
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:

```js title="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;
  }
});
```