Skip to main content

x-spreadsheet

With a familiar UI, x-spreadsheet is an excellent choice for a modern editor.

Click here for a live standalone integration demo.

Live Demo

note

Due to CSS conflicts between the data grid and the documentation generator, features like scrolling may not work as expected.

The linked demo uses a simple HTML page.

Result
Loading...
Live Editor

Integration Library

The integration library can be downloaded from the SheetJS CDN:

When used in a browser tag, it exposes two functions: xtos and stox.

  • stox(worksheet) returns a data structure suitable for grid.loadData
  • xtos(data) accepts the result of grid.getData and generates a workbook

Reading Data

The following snippet fetches a spreadsheet and loads the grid:

(async() => {
const ab = await (await fetch("https://sheetjs.com/pres.numbers")).arrayBuffer();
grid.loadData(stox(XLSX.read(ab)));
})();

The same pattern can be used in file input elements and other data sources.

Writing Data

The following snippet exports the grid data to a file:

/* build workbook from the grid data */
XLSX.writeFile(xtos(grid.getData()), "SheetJS.xlsx");

Other Details

Obtaining the Library

The x-data-spreadsheet NodeJS packages include a minified script that can be directly inserted as a script tag. The unpkg CDN also serves this script:

<!-- x-spreadsheet stylesheet -->
<link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet/dist/xspreadsheet.css"/>
<!-- x-spreadsheet library -->
<script src="https://unpkg.com/x-data-spreadsheet/dist/xspreadsheet.js"></script>

Previewing and Editing Data

The HTML document needs a container element:

<div id="gridctr"></div>

Grid initialization is a one-liner:

var grid = x_spreadsheet(document.getElementById("gridctr"));

x-spreadsheet handles the entire edit cycle. No intervention is necessary.

Additional Features

This demo barely scratches the surface. The underlying grid component includes many additional features that work with SheetJS Pro.