docs.sheetjs.com/docz/docs/03-demos/02-frontend/02-react.md

762 lines
20 KiB
Markdown
Raw Normal View History

2022-08-17 07:10:01 +00:00
---
2023-08-21 23:07:34 +00:00
title: Sheets in ReactJS Sites
2023-07-06 07:21:41 +00:00
sidebar_label: ReactJS
description: Build interactive websites with ReactJS. Seamlessly integrate spreadsheets into your app using SheetJS. Bring Excel-powered workflows and data to the modern web.
2023-01-10 00:31:37 +00:00
pagination_prev: demos/index
2023-02-28 11:40:44 +00:00
pagination_next: demos/grid/index
2024-03-25 04:13:01 +00:00
sidebar_position: 2
2022-08-17 07:10:01 +00:00
---
2023-04-27 09:12:19 +00:00
import current from '/version.js';
2023-06-13 17:49:52 +00:00
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
2023-05-07 13:58:36 +00:00
import CodeBlock from '@theme/CodeBlock';
2023-04-27 09:12:19 +00:00
2023-07-06 07:21:41 +00:00
[ReactJS](https://react.dev/) is a JavaScript library for building user interfaces.
[SheetJS](https://sheetjs.com) is a JavaScript library for reading and writing
data from spreadsheets.
This demo uses ReactJS and SheetJS to process and generate spreadsheets. We'll
explore how to load SheetJS in a ReactJS site and compare common state models
and data flow strategies.
2022-08-17 07:10:01 +00:00
2023-07-06 07:21:41 +00:00
:::note pass
2022-08-17 07:10:01 +00:00
2023-07-06 07:21:41 +00:00
This demo focuses on ReactJS concepts. Other demos cover general deployments:
2022-08-17 07:10:01 +00:00
2023-01-15 03:36:13 +00:00
- [Static Site Generation powered by NextJS](/docs/demos/static/nextjs)
2023-01-05 23:33:49 +00:00
- [iOS and Android applications powered by React Native](/docs/demos/mobile/reactnative)
- [Desktop application powered by React Native Windows + macOS](/docs/demos/desktop/reactnative)
2023-04-19 08:50:07 +00:00
- [React Data Grid UI component](/docs/demos/grid/rdg)
2023-04-07 08:30:20 +00:00
- [Glide Data Grid UI component](/docs/demos/grid/gdg)
2022-08-17 07:10:01 +00:00
2023-07-06 07:21:41 +00:00
:::
2022-08-17 07:10:01 +00:00
## Installation
2022-10-30 05:45:37 +00:00
[The "Frameworks" section](/docs/getting-started/installation/frameworks) covers
2022-08-17 07:10:01 +00:00
installation with Yarn and other package managers.
The library can be imported directly from JS or JSX code with:
```js
import { read, utils, writeFile } from 'xlsx';
```
## Internal State
The various SheetJS APIs work with various data shapes. The preferred state
depends on the application.
### Array of Objects
Typically, some users will create a spreadsheet with source data that should be
2023-06-13 17:49:52 +00:00
loaded into the site. This sheet will have known columns.
2022-08-17 07:10:01 +00:00
2023-06-13 17:49:52 +00:00
#### State
2022-08-17 07:10:01 +00:00
2023-06-13 17:49:52 +00:00
The example [presidents sheet](https://sheetjs.com/pres.xlsx) has one header row
with "Name" and "Index" columns. The natural JS representation is an object for
each row, using the values in the first rows as keys:
2022-08-17 07:10:01 +00:00
2023-06-13 17:49:52 +00:00
<table><thead><tr><th>Spreadsheet</th><th>State</th></tr></thead><tbody><tr><td>
2022-08-17 07:10:01 +00:00
2023-06-13 17:49:52 +00:00
![`pres.xlsx` data](pathname:///pres.png)
2022-08-17 07:10:01 +00:00
2023-06-13 17:49:52 +00:00
</td><td>
2022-08-17 07:10:01 +00:00
```js
[
{ Name: "Bill Clinton", Index: 42 },
{ Name: "GeorgeW Bush", Index: 43 },
{ Name: "Barack Obama", Index: 44 },
{ Name: "Donald Trump", Index: 45 },
{ Name: "Joseph Biden", Index: 46 }
]
```
2023-06-13 17:49:52 +00:00
</td></tr></tbody></table>
2023-08-21 23:07:34 +00:00
The ReactJS `useState`[^1] hook can configure the state:
2023-06-13 17:49:52 +00:00
<Tabs groupId="lang">
<TabItem name="JS" value="JavaScript">
```ts
import { useState } from 'react';
2023-06-29 21:07:52 +00:00
/* the component state is an array of objects */
2023-06-13 17:49:52 +00:00
const [pres, setPres] = useState([]);
```
</TabItem>
<TabItem name="TS" value="TypeScript" default>
```ts
import { useState } from 'react';
2023-06-29 21:07:52 +00:00
/* the component state is an array of objects */
const [pres, setPres] = useState<any[]>([]);
```
When the spreadsheet header row is known ahead of time, row typing is possible:
```ts
import { useState } from 'react';
2023-06-13 17:49:52 +00:00
interface President {
Name: string;
Index: number;
}
/* the component state is an array of presidents */
const [pres, setPres] = useState<President[]>([]);
```
2023-06-29 21:07:52 +00:00
:::caution pass
2023-06-13 17:49:52 +00:00
The types are informative. They do not enforce that worksheets include the named
columns. A runtime data validation library should be used to verify the dataset.
2023-06-29 21:07:52 +00:00
When the file header is not known in advance, `any` should be used.
2023-06-13 17:49:52 +00:00
:::
</TabItem>
</Tabs>
#### Updating State
2023-08-21 23:07:34 +00:00
The SheetJS [`read`](/docs/api/parse-options) and [`sheet_to_json`](/docs/api/utilities/array#array-output)
2023-06-13 17:49:52 +00:00
functions simplify state updates. They are best used in the function bodies of
2023-08-21 23:07:34 +00:00
`useEffect`[^2] and `useCallback`[^3] hooks.
2023-06-13 17:49:52 +00:00
A `useEffect` hook can download and update state when a person loads the site:
```mermaid
flowchart LR
url[(Remote\nFile)]
ab[(Data\nArrayBuffer)]
wb(SheetJS\nWorkbook)
ws(SheetJS\nWorksheet)
aoo(array of\nobjects)
state((component\nstate))
url --> |fetch\n\n| ab
ab --> |read\n\n| wb
wb --> |wb.Sheets\nselect sheet| ws
ws --> |sheet_to_json\n\n| aoo
aoo --> |setPres\nfrom `setState`| state
```
<Tabs groupId="lang">
<TabItem name="JS" value="JavaScript">
2023-07-06 07:21:41 +00:00
```js
2023-06-13 17:49:52 +00:00
import { useEffect } from 'react';
import { read, utils } from 'xlsx';
/* Fetch and update the state once */
useEffect(() => { (async() => {
2023-10-09 01:13:21 +00:00
/* Download from https://sheetjs.com/pres.numbers */
const f = await fetch("https://sheetjs.com/pres.numbers");
const ab = await f.arrayBuffer();
2023-06-13 17:49:52 +00:00
// highlight-start
2023-10-09 01:13:21 +00:00
/* parse */
const wb = read(ab);
/* generate array of objects from first worksheet */
2023-06-13 17:49:52 +00:00
const ws = wb.Sheets[wb.SheetNames[0]]; // get the first worksheet
const data = utils.sheet_to_json(ws); // generate objects
2023-10-09 01:13:21 +00:00
/* update state */
2023-06-13 17:49:52 +00:00
setPres(data); // update state
// highlight-end
})(); }, []);
```
</TabItem>
<TabItem name="TS" value="TypeScript" default>
```ts
import { useEffect } from 'react';
import { read, utils } from 'xlsx';
/* Fetch and update the state once */
useEffect(() => { (async() => {
2023-10-09 01:13:21 +00:00
/* Download from https://sheetjs.com/pres.numbers */
const f = await fetch("https://sheetjs.com/pres.numbers");
const ab = await f.arrayBuffer();
2023-06-13 17:49:52 +00:00
// highlight-start
2023-10-09 01:13:21 +00:00
/* parse */
const wb = read(ab);
/* generate array of presidents from the first worksheet */
2023-06-13 17:49:52 +00:00
const ws = wb.Sheets[wb.SheetNames[0]]; // get the first worksheet
const data: President[] = utils.sheet_to_json<President>(ws); // generate objects
2023-10-09 01:13:21 +00:00
/* update state */
2023-06-13 17:49:52 +00:00
setPres(data); // update state
// highlight-end
})(); }, []);
```
</TabItem>
</Tabs>
#### Rendering Data
Components typically render HTML tables from arrays of objects. The `<tr>` table
row elements are typically generated by mapping over the state array, as shown
in the example JSX code:
```jsx title="Example JSX for displaying arrays of objects"
<table>
{/* The `thead` section includes the table header row */}
2023-12-05 03:46:54 +00:00
<thead><tr><th>Name</th><th>Index</th></tr></thead>
2023-06-13 17:49:52 +00:00
{/* The `tbody` section includes the data rows */}
<tbody>
{/* generate row (TR) for each president */}
// highlight-start
{pres.map(row => (
<tr>
{/* Generate cell (TD) for name / index */}
<td>{row.Name}</td>
<td>{row.Index}</td>
</tr>
))}
// highlight-end
</tbody>
</table>
```
#### Exporting Data
The [`writeFile`](/docs/api/write-options) and [`json_to_sheet`](/docs/api/utilities/array#array-of-objects-input)
functions simplify exporting data. They are best used in the function bodies of
2023-08-21 23:07:34 +00:00
`useCallback`[^4] hooks attached to button or other elements.
2023-06-13 17:49:52 +00:00
A callback can generate a local file when a user clicks a button:
```mermaid
flowchart LR
state((component\nstate))
ws(SheetJS\nWorksheet)
wb(SheetJS\nWorkbook)
file[(XLSX\nexport)]
state --> |json_to_sheet\n\n| ws
ws --> |book_new\nbook_append_sheet| wb
wb --> |writeFile\n\n| file
```
```ts
import { useCallback } from 'react';
import { utils, writeFile } from 'xlsx';
/* get state data and export to XLSX */
const exportFile = useCallback(() => {
/* generate worksheet from state */
// highlight-next-line
const ws = utils.json_to_sheet(pres);
/* create workbook and append worksheet */
const wb = utils.book_new();
utils.book_append_sheet(wb, ws, "Data");
/* export to XLSX */
writeFile(wb, "SheetJSReactAoO.xlsx");
}, [pres]);
```
#### Complete Component
This complete component example fetches a test file and displays the contents in
a HTML table. When the export button is clicked, a callback will export a file:
2022-08-17 07:10:01 +00:00
2022-08-19 06:42:18 +00:00
```jsx title="src/SheetJSReactAoO.js"
import React, { useCallback, useEffect, useState } from "react";
import { read, utils, writeFileXLSX } from 'xlsx';
2022-08-17 07:10:01 +00:00
export default function SheetJSReactAoO() {
/* the component state is an array of presidents */
2022-08-19 06:42:18 +00:00
const [pres, setPres] = useState([]);
2022-08-17 07:10:01 +00:00
/* Fetch and update the state once */
useEffect(() => { (async() => {
const f = await (await fetch("https://sheetjs.com/pres.xlsx")).arrayBuffer();
// highlight-start
const wb = read(f); // parse the array buffer
const ws = wb.Sheets[wb.SheetNames[0]]; // get the first worksheet
2022-08-19 06:42:18 +00:00
const data = utils.sheet_to_json(ws); // generate objects
2022-08-17 07:10:01 +00:00
setPres(data); // update state
// highlight-end
})(); }, []);
2022-08-19 06:42:18 +00:00
/* get state data and export to XLSX */
const exportFile = useCallback(() => {
// highlight-next-line
const ws = utils.json_to_sheet(pres);
const wb = utils.book_new();
utils.book_append_sheet(wb, ws, "Data");
writeFileXLSX(wb, "SheetJSReactAoO.xlsx");
}, [pres]);
2023-12-05 03:46:54 +00:00
return (<table><thead><tr><th>Name</th><th>Index</th></tr></thead><tbody>
2022-08-17 07:10:01 +00:00
{ /* generate row for each president */
// highlight-start
pres.map(pres => (<tr>
<td>{pres.Name}</td>
<td>{pres.Index}</td>
</tr>))
// highlight-end
}
2022-08-19 06:42:18 +00:00
</tbody><tfoot><td colSpan={2}>
<button onClick={exportFile}>Export XLSX</button>
</td></tfoot></table>);
2022-08-17 07:10:01 +00:00
}
```
<details open>
<summary><b>How to run the example</b> (click to hide)</summary>
2023-02-28 11:40:44 +00:00
2023-10-09 01:13:21 +00:00
<Tabs groupId="starter">
<TabItem name="vite" value="ViteJS">
2023-12-05 03:46:54 +00:00
:::note Tested Deployments
2023-10-09 01:13:21 +00:00
2023-12-05 03:46:54 +00:00
This demo was tested in the following environments:
| ReactJS | ViteJS | Date |
|:---------|:--------|:-----------|
2024-03-14 08:25:08 +00:00
| `18.2.0` | `5.1.6` | 2024-03-13 |
2023-10-09 01:13:21 +00:00
:::
1) Create a new site:
```bash
npm create vite@latest sheetjs-react -- --template react
```
2) Install the SheetJS dependency and start the dev server:
<CodeBlock language="bash">{`\
cd sheetjs-react
npm i
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
npm run dev`}
</CodeBlock>
3) Open a web browser and access the displayed URL (`http://localhost:5173`)
4) Replace `src/App.jsx` with the `src/SheetJSReactAoO.js` example.
The page will refresh and show a table with an Export button. Click the button
2023-12-05 03:46:54 +00:00
and the page will attempt to download `SheetJSReactAoO.xlsx`.
2023-10-09 01:13:21 +00:00
5) Build the site:
```bash
npm run build
```
The generated site will be placed in the `dist` folder.
6) Start a local web server:
```bash
npx http-server dist
```
Access the displayed URL (typically `http://localhost:8080`) with a web browser
and test the page.
</TabItem>
<TabItem name="CRA" value="create-react-app">
2023-12-05 03:46:54 +00:00
:::note Tested Deployments
2023-02-28 11:40:44 +00:00
2024-03-14 08:25:08 +00:00
This demo was tested in the following environments:
| ReactJS | CRA | Date |
|:---------|:--------|:-----------|
| `18.2.0` | `5.0.1` | 2024-03-13 |
2023-02-28 11:40:44 +00:00
:::
2023-07-06 07:21:41 +00:00
1) Create a new site:
```bash
npx -y create-react-app@5.0.1 --scripts-version=5.0.1 sheetjs-react
```
2023-02-28 11:40:44 +00:00
2) Install the SheetJS dependency and start the dev server:
2023-05-07 13:58:36 +00:00
<CodeBlock language="bash">{`\
2023-02-28 11:40:44 +00:00
cd sheetjs-react
2023-05-07 13:58:36 +00:00
npm i
2023-04-27 09:12:19 +00:00
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
npm start`}
2023-05-07 13:58:36 +00:00
</CodeBlock>
2023-02-28 11:40:44 +00:00
3) Open a web browser and access the displayed URL (`http://localhost:3000`)
4) Replace `src/App.js` with the `src/SheetJSReactAoO.js` example.
The page will refresh and show a table with an Export button. Click the button
2023-12-05 03:46:54 +00:00
and the page will attempt to download `SheetJSReactAoO.xlsx`.
2023-02-28 11:40:44 +00:00
2023-10-09 01:13:21 +00:00
5) Build the site:
```bash
npm run build
```
The generated site will be placed in the `build` folder.
6) Start a local web server:
```bash
npx http-server build
```
2024-03-14 08:25:08 +00:00
Access the displayed URL (typically `http://localhost:8080`) with a web browser
and test the page.
</TabItem>
<TabItem name="nextjs" value="NextJS">
:::note Tested Deployments
This demo was tested in the following environments:
| ReactJS | NextJS | Date |
|:---------|:---------|:-----------|
| `18.2.0` | `14.1.3` | 2024-03-13 |
:::
:::info pass
This demo focuses on processing data in Client Components.
The [NextJS demo](/docs/demos/static/nextjs) covers static site generation.
:::
:::caution pass
NextJS requires a number of workarounds for simple client-side JavaScript code.
**It is strongly recommended to use ViteJS or create-react-app when possible!**
:::
:::warning Telemetry
NextJS collects telemetry by default. The `telemetry` subcommand can disable it:
```js
npx next telemetry disable
```
The setting can be verified by running
```js
npx next telemetry status
```
:::
0) Disable NextJS telemetry:
```bash
npx next telemetry disable
```
1) Create a new site:
```bash
npx create-next-app@latest sheetjs-react --ts --no-eslint --no-tailwind --no-src-dir --no-app --import-alias "@/*"
```
2) Install the SheetJS dependency and start the dev server:
<CodeBlock language="bash">{`\
cd sheetjs-react
npm i
npx next telemetry disable
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
npm run dev`}
</CodeBlock>
3) Open a web browser and access the displayed URL (`http://localhost:5173`)
4) Replace `src/App.jsx` with the `src/SheetJSReactAoO.js` example.
After replacing the code, add the following to the top of `src/App.jsx`:
```js title="src/App.jsx (add to top)"
"use client";
```
:::info NextJS Client Component Workaround
The goal is to run SheetJS code in the browser. NextJS will attempt to render
pages on the server by default. `"use client";` instructs NextJS to treat the
exported component as a "Client Component" that will be rendered in the browser.
If the pragma is not added, NextJS will report errors related to hydration:
```
Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Expected server HTML to contain a matching <td> in <tfoot>.
See more info here: https://nextjs.org/docs/messages/react-hydration-error
```
:::
The page will refresh and show a table with an Export button. Click the button
and the page will attempt to download `SheetJSReactAoO.xlsx`.
5) Build the site:
```bash
npm run build
```
The generated site will be placed in the `dist` folder.
6) Start a local web server:
```bash
npx http-server dist
```
2023-10-09 01:13:21 +00:00
Access the displayed URL (typically `http://localhost:8080`) with a web browser
and test the page.
</TabItem>
</Tabs>
2023-02-28 11:40:44 +00:00
When the page loads, the app will fetch https://sheetjs.com/pres.xlsx and
2024-03-14 08:25:08 +00:00
display the data from the first worksheet in a TABLE. The "Export XLSX" button
will generate a workbook that can be opened in a spreadsheet editor.
2023-02-28 11:40:44 +00:00
</details>
2022-08-17 07:10:01 +00:00
### HTML
The main disadvantage of the Array of Objects approach is the specific nature
of the columns. For more general use, passing around an Array of Arrays works.
However, this does not handle merge cells well!
2023-08-21 23:07:34 +00:00
The [`sheet_to_html`](/docs/api/utilities/html#html-table-output) function
generates HTML that is aware of merges and other worksheet features. ReactJS
`dangerouslySetInnerHTML`[^5] prop allows code to set the `innerHTML` attribute,
effectively inserting the code into the page.
2023-05-11 06:17:10 +00:00
In this example, the component attaches a `ref` to the `DIV` container. During
2023-08-21 23:07:34 +00:00
export, the first `TABLE` child element can be parsed with [`table_to_book`](/docs/api/utilities/html#html-table-input) to
2023-05-11 06:17:10 +00:00
generate a workbook object.
2022-08-17 07:10:01 +00:00
2022-08-19 06:42:18 +00:00
```jsx title="src/SheetJSReactHTML.js"
import React, { useCallback, useEffect, useRef, useState } from "react";
import { read, utils, writeFileXLSX } from 'xlsx';
2022-08-17 07:10:01 +00:00
export default function SheetJSReactHTML() {
/* the component state is an HTML string */
2022-10-21 00:10:10 +00:00
const [__html, setHtml] = useState("");
2022-08-19 06:42:18 +00:00
/* the ref is used in export */
const tbl = useRef(null);
2022-08-17 07:10:01 +00:00
/* Fetch and update the state once */
useEffect(() => { (async() => {
const f = await (await fetch("https://sheetjs.com/pres.xlsx")).arrayBuffer();
const wb = read(f); // parse the array buffer
const ws = wb.Sheets[wb.SheetNames[0]]; // get the first worksheet
// highlight-start
const data = utils.sheet_to_html(ws); // generate HTML
setHtml(data); // update state
// highlight-end
})(); }, []);
2022-08-19 06:42:18 +00:00
/* get live table and export to XLSX */
const exportFile = useCallback(() => {
// highlight-start
const elt = tbl.current.getElementsByTagName("TABLE")[0];
const wb = utils.table_to_book(elt);
// highlight-end
writeFileXLSX(wb, "SheetJSReactHTML.xlsx");
}, [tbl]);
return ( <>
<button onClick={exportFile}>Export XLSX</button>
2022-08-17 07:10:01 +00:00
// highlight-next-line
2022-10-21 00:10:10 +00:00
<div ref={tbl} dangerouslySetInnerHTML={{ __html }} />
2023-02-28 11:40:44 +00:00
</> );
2022-08-17 07:10:01 +00:00
}
```
<details open>
<summary><b>How to run the example</b> (click to hide)</summary>
2023-02-28 11:40:44 +00:00
2023-10-09 01:13:21 +00:00
<Tabs groupId="starter">
<TabItem name="vite" value="ViteJS">
2023-12-05 03:46:54 +00:00
:::note Tested Deployments
2023-10-09 01:13:21 +00:00
2024-03-14 08:25:08 +00:00
This demo was tested in the following environments:
| ReactJS | ViteJS | Date |
|:---------|:--------|:-----------|
| `18.2.0` | `5.1.6` | 2024-03-13 |
2023-10-09 01:13:21 +00:00
:::
1) Create a new site:
```bash
npm create vite@latest sheetjs-react -- --template react
```
2) Install the SheetJS dependency and start the dev server:
<CodeBlock language="bash">{`\
cd sheetjs-react
npm i
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
npm run dev`}
</CodeBlock>
3) Open a web browser and access the displayed URL (`http://localhost:5173`)
4) Replace `src/App.jsx` with the `src/SheetJSReactHTML.js` example.
The page will refresh and show a table with an Export button. Click the button
and the page will attempt to download `SheetJSReactHTML.xlsx`.
5) Build the site:
```bash
npm run build
```
The generated site will be placed in the `dist` folder.
6) Start a local web server:
```bash
npx http-server dist
```
Access the displayed URL (typically `http://localhost:8080`) with a web browser
and test the page.
</TabItem>
<TabItem name="CRA" value="create-react-app">
2023-12-05 03:46:54 +00:00
:::note Tested Deployments
2023-02-28 11:40:44 +00:00
2024-03-14 08:25:08 +00:00
This demo was tested in the following environments:
| ReactJS | CRA | Date |
|:---------|:--------|:-----------|
| `18.2.0` | `5.0.1` | 2024-03-13 |
2023-02-28 11:40:44 +00:00
:::
2023-07-06 07:21:41 +00:00
1) Create a new site:
```bash
npx -y create-react-app@5.0.1 --scripts-version=5.0.1 sheetjs-react
```
2023-02-28 11:40:44 +00:00
2) Install the SheetJS dependency and start the dev server:
2023-05-07 13:58:36 +00:00
<CodeBlock language="bash">{`\
2023-02-28 11:40:44 +00:00
cd sheetjs-react
2023-05-07 13:58:36 +00:00
npm i
2023-04-27 09:12:19 +00:00
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
npm start`}
2023-05-07 13:58:36 +00:00
</CodeBlock>
2023-02-28 11:40:44 +00:00
3) Open a web browser and access the displayed URL (`http://localhost:3000`)
4) Replace `src/App.js` with the `src/SheetJSReactHTML.js` example.
The page will refresh and show a table with an Export button. Click the button
and the page will attempt to download `SheetJSReactHTML.xlsx`.
2023-10-09 01:13:21 +00:00
5) Build the site:
```bash
npm run build
```
The generated site will be placed in the `build` folder.
6) Start a local web server:
```bash
npx http-server build
```
Access the displayed URL (typically `http://localhost:8080`) with a web browser
and test the page.
</TabItem>
</Tabs>
2023-02-28 11:40:44 +00:00
When the page loads, the app will fetch https://sheetjs.com/pres.xlsx and
2024-03-14 08:25:08 +00:00
display the data from the first worksheet in a TABLE. The "Export XLSX" button
will generate a workbook that can be opened in a spreadsheet editor.
2023-02-28 11:40:44 +00:00
</details>
2022-08-17 07:10:01 +00:00
### Rows and Columns
Some data grids and UI components split worksheet state in two parts: an array
of column attribute objects and an array of row objects. The former is used to
generate column headings and for indexing into the row objects.
The safest approach is to use an array of arrays for state and to generate
2022-08-23 03:20:02 +00:00
column objects that map to A1-Style column headers.
2022-08-17 07:10:01 +00:00
2023-08-21 23:07:34 +00:00
The [React Data Grid demo](/docs/demos/grid/rdg#rows-and-columns-state) uses
this approach with the following column and row structure:
2022-08-17 07:10:01 +00:00
```js
/* rows are generated with a simple array of arrays */
const rows = utils.sheet_to_json(worksheet, { header: 1 });
/* column objects are generated based on the worksheet range */
const range = utils.decode_range(ws["!ref"]||"A1");
const columns = Array.from({ length: range.e.c + 1 }, (_, i) => ({
/* for an array of arrays, the keys are "0", "1", "2", ... */
key: String(i),
/* column labels: encode_col translates 0 -> "A", 1 -> "B", 2 -> "C", ... */
name: XLSX.utils.encode_col(i)
}));
```
![Column labels for headers](pathname:///react/cols.png)
## Legacy Deployments
2022-10-30 05:45:37 +00:00
[The Standalone Scripts](/docs/getting-started/installation/standalone) play nice
2022-08-17 07:10:01 +00:00
with legacy deployments that do not use a bundler.
2023-07-06 07:21:41 +00:00
[The legacy demo](pathname:///react/index.html) shows a simple ReactJS component
2023-08-21 23:07:34 +00:00
transpiled in the browser using Babel standalone library.
[^1]: See [`useState`](https://react.dev/reference/react/useState) in the ReactJS documentation.
[^2]: See [`useEffect`](https://react.dev/reference/react/useEffect) in the ReactJS documentation.
[^3]: See [`useCallback`](https://react.dev/reference/react/useCallback) in the ReactJS documentation.
[^4]: See [`useCallback`](https://react.dev/reference/react/useCallback) in the ReactJS documentation.
[^5]: [`dangerouslySetInnerHTML`](https://react.dev/reference/react-dom/components/common#common-props) is a ReactJS prop supported for all built-in components.