---
title: x-spreadsheet
pagination_prev: demos/frontend/index
pagination_next: demos/net/index
---

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

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

[Click here for a live standalone integration demo.](pathname:///xspreadsheet/)

:::note Tested Deployments

This demo was last verified on 2023 December 04.

:::

## Live Demo

:::caution pass

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.](pathname:///xspreadsheet/)

:::

```jsx live
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](https://cdn.sheetjs.com/xspreadsheet/xlsxspread.js)
- [Production Use](https://cdn.sheetjs.com/xspreadsheet/xlsxspread.min.js)

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:

```js
(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:

```js
/* 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:

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

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

Grid initialization is a one-liner:

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

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

#### Additional Features

:::tip pass

This demo barely scratches the surface.  The underlying grid component includes
many additional features that work with [SheetJS Pro](https://sheetjs.com/pro).

:::