3.5 KiB
| title | pagination_prev | pagination_next |
|---|---|---|
| x-spreadsheet | demos/frontend/index | demos/net/index |
With a familiar UI, x-spreadsheet is an excellent choice for a modern editor.
Click here for a live standalone integration demo.
:::note Tested Deployments
This demo was last verified on 2024 April 25.
:::
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.
:::
function SheetJSXSpread() {
const [url, setUrl] = React.useState("https://docs.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:
When used in a browser tag, it exposes two functions: xtos and stox.
stox(worksheet)returns a data structure suitable forgrid.loadDataxtos(data)accepts the result ofgrid.getDataand generates a workbook
Reading Data
The following snippet fetches a spreadsheet and loads the grid:
(async() => {
const ab = await (await fetch("https://docs.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
:::tip pass
This demo barely scratches the surface. The underlying grid component includes many additional features that work with SheetJS Pro.
:::