2023-02-28 11:40:44 +00:00
|
|
|
---
|
|
|
|
|
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/)
|
|
|
|
|
|
2023-12-05 03:46:54 +00:00
|
|
|
:::note Tested Deployments
|
2023-09-05 18:04:23 +00:00
|
|
|
|
2024-04-26 04:16:13 +00:00
|
|
|
This demo was last verified on 2024 April 25.
|
2023-09-05 18:04:23 +00:00
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
|
2023-02-28 11:40:44 +00:00
|
|
|
## Live Demo
|
|
|
|
|
|
2023-09-24 03:59:48 +00:00
|
|
|
:::caution pass
|
2023-02-28 11:40:44 +00:00
|
|
|
|
|
|
|
|
Due to CSS conflicts between the data grid and the documentation generator,
|
|
|
|
|
features like scrolling may not work as expected.
|
|
|
|
|
|
2023-09-05 18:04:23 +00:00
|
|
|
[The standalone demo uses a simple HTML page.](pathname:///xspreadsheet/)
|
2023-02-28 11:40:44 +00:00
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
|
|
|
|
|
```jsx live
|
|
|
|
|
function SheetJSXSpread() {
|
2024-04-26 04:16:13 +00:00
|
|
|
const [url, setUrl] = React.useState("https://docs.sheetjs.com/pres.numbers");
|
2023-02-28 11:40:44 +00:00
|
|
|
const [done, setDone] = React.useState(false);
|
2023-03-12 06:25:57 +00:00
|
|
|
const ref = React.useRef(); // ref to DIV container
|
2023-07-21 09:17:32 +00:00
|
|
|
const set_url = (evt) => setUrl(evt.target.value);
|
2023-02-28 11:40:44 +00:00
|
|
|
|
|
|
|
|
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>
|
2023-03-12 06:25:57 +00:00
|
|
|
</> )}
|
2023-02-28 11:40:44 +00:00
|
|
|
</> );
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 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() => {
|
2024-04-26 04:16:13 +00:00
|
|
|
const ab = await (await fetch("https://docs.sheetjs.com/pres.numbers")).arrayBuffer();
|
2023-02-28 11:40:44 +00:00
|
|
|
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
|
|
|
|
|
|
2023-09-05 18:04:23 +00:00
|
|
|
:::tip pass
|
|
|
|
|
|
2023-02-28 11:40:44 +00:00
|
|
|
This demo barely scratches the surface. The underlying grid component includes
|
|
|
|
|
many additional features that work with [SheetJS Pro](https://sheetjs.com/pro).
|
2023-09-05 18:04:23 +00:00
|
|
|
|
|
|
|
|
:::
|
