x-spreadsheet

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

Click here for a live standalone integration demo.

Tested Deployments

This demo was last verified on 2023 December 04.

Live Demo

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

The standalone demo uses a simple HTML page.

Result

Loading...

Live Editor

function SheetJSXSpread() { const [url, setUrl] = React.useState("https://sheetjs.com/pres.numbers"); const [done, setDone] = React.useState(false); const ref = React.useRef(); // ref to DIV container const set_url = (evt) => setUrl(evt.target.value); return ( <> <div height={300} width={300} ref={ref}/> {!done && ( <> <b>URL: </b><input type="text" value={url} onChange={set_url} size="50"/> <br/><button onClick={async() => { /* fetch and parse workbook */ const wb = XLSX.read(await (await fetch(url)).arrayBuffer()); /* set up grid and load data */ x_spreadsheet(ref.current).loadData(stox(wb)); setDone(true); }}><b>Fetch!</b></button> </> )} </> ); }

function SheetJSXSpread() {
  const [url, setUrl] = React.useState("https://sheetjs.com/pres.numbers");
  const [done, setDone] = React.useState(false);
  const ref = React.useRef(); // ref to DIV container
  const set_url = (evt) => setUrl(evt.target.value);

  return ( <>
    <div height={300} width={300} ref={ref}/>
    {!done && ( <>
      <b>URL: </b><input type="text" value={url} onChange={set_url} size="50"/>
      <br/><button onClick={async() => {
        /* fetch and parse workbook */
        const wb = XLSX.read(await (await fetch(url)).arrayBuffer());
        /* set up grid and load data */
        x_spreadsheet(ref.current).loadData(stox(wb));
        setDone(true);
      }}><b>Fetch!</b></button>
    </> )}
  </> );
}

Integration Library

The integration library can be downloaded from the SheetJS CDN:

• Development Use
• Production Use

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.