docs.sheetjs.com/docz/docs/03-demos/04-grid/16-rdg.md

180 lines
4.8 KiB
Markdown
Raw Normal View History

2023-04-19 08:50:07 +00:00
---
title: React Datagrid
pagination_prev: demos/frontend/index
pagination_next: demos/net/index
---
2023-04-27 09:12:19 +00:00
import current from '/version.js';
2023-05-01 01:27:02 +00:00
import CodeBlock from '@theme/CodeBlock';
2023-04-27 09:12:19 +00:00
2023-12-05 03:46:54 +00:00
[React Data Grid](https://adazzle.github.io/react-data-grid/) is a data grid
designed for the ReactJS web framework.
2023-04-19 08:50:07 +00:00
2023-12-05 03:46:54 +00:00
[SheetJS](https://sheetjs.com) is a JavaScript library for reading and writing
data from spreadsheets.
2023-04-19 08:50:07 +00:00
2023-12-05 03:46:54 +00:00
This demo uses React Data Grid and SheetJS to pull data from a spreadsheet and
display the content in a data grid. We'll explore how to import data from files
into the data grid and how to export modified data from the grid to workbooks.
2023-04-19 08:50:07 +00:00
2023-12-05 03:46:54 +00:00
The ["Demo"](#demo) section includes a complete example that displays data from
user-supplied sheets and exports data to XLSX workbooks:
2023-04-19 08:50:07 +00:00
![react-data-grid screenshot](pathname:///rdg/rdg1.png)
2023-12-05 03:46:54 +00:00
:::note Tested Deployments
This demo was tested in the following environments:
| Version | Date | Notes |
|:----------------|:-----------|:---------------------|
| `7.0.0-beta.19` | 2023-12-04 | |
| `7.0.0-beta.41` | 2023-12-04 | Editing did not work |
:::
:::danger pass
2023-12-05 03:46:54 +00:00
When this demo was last tested, the grid correctly displayed data but could not
be edited by the user.
The current recommendation is to use version `7.0.0-beta.19`.
:::
2023-04-19 08:50:07 +00:00
## Integration Details
2023-12-05 03:46:54 +00:00
[The "Frameworks" section](/docs/getting-started/installation/frameworks) covers
installation with Yarn and other package managers.
Using the `npm` tool, this command installs SheetJS and React Data Grid:
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz react-data-grid@7.0.0-beta.41`}
</CodeBlock>
Methods and components in both libraries can be loaded in pages using `import`:
```js
import { read, utils, writeFile } from 'xlsx';
import DataGrid, { Column } from "react-data-grid";
```
2023-04-19 08:50:07 +00:00
#### Rows and Columns state
`react-data-grid` state consists of an Array of column metadata and an Array of
row objects. Typically both are defined in state:
```jsx
import DataGrid, { Column } from "react-data-grid";
export default function App() {
const [rows, setRows] = useState([]);
const [columns, setColumns] = useState([]);
return ( <DataGrid columns={columns} rows={rows} onRowsChange={setRows} /> );
}
```
The most generic data representation is an array of arrays. To sate the grid,
columns must be objects whose `key` property is the index converted to string:
```ts
import { WorkSheet, utils } from 'xlsx';
import { textEditor, Column } from "react-data-grid";
type Row = any[];
type AOAColumn = Column<Row>;
type RowCol = { rows: Row[]; columns: AOAColumn[]; };
function ws_to_rdg(ws: WorkSheet): RowCol {
/* create an array of arrays */
const rows = utils.sheet_to_json(ws, { header: 1 });
/* create column array */
const range = utils.decode_range(ws["!ref"]||"A1");
const columns = Array.from({ length: range.e.c + 1 }, (_, i) => ({
key: String(i), // RDG will access row["0"], row["1"], etc
name: utils.encode_col(i), // the column labels will be A, B, etc
editor: textEditor // enable cell editing
}));
return { rows, columns }; // these can be fed to setRows / setColumns
}
```
In the other direction, a worksheet can be generated with `aoa_to_sheet`:
```ts
import { WorkSheet, utils } from 'xlsx';
type Row = any[];
function rdg_to_ws(rows: Row[]): WorkSheet {
return utils.aoa_to_sheet(rows);
}
```
2023-09-24 03:59:48 +00:00
:::caution pass
2023-04-19 08:50:07 +00:00
When the demo was last refreshed, row array objects were preserved. This was
not the case in a later release. The row arrays must be re-created.
The snippet defines a `arrayify` function that creates arrays if necessary.
```ts
import { WorkSheet, utils } from 'xlsx';
type Row = any[];
// highlight-start
function arrayify(rows: any[]): Row[] {
return rows.map(row => {
var length = Object.keys(row).length;
for(; length > 0; --length) if(row[length-1] != null) break;
return Array.from({length, ...row});
});
}
// highlight-end
function rdg_to_ws(rows: Row[]): WorkSheet {
return utils.aoa_to_sheet(arrayify(rows));
}
```
:::
## Demo
1) Create a new TypeScript `create-react-app` app:
```bash
npx create-react-app sheetjs-rdg --template typescript
cd sheetjs-rdg
```
2) Install dependencies:
2023-05-01 01:27:02 +00:00
<CodeBlock language="bash">{`\
2023-12-05 03:46:54 +00:00
npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz react-data-grid@7.0.0-beta.41`}
2023-05-01 01:27:02 +00:00
</CodeBlock>
2023-04-19 08:50:07 +00:00
3) Download [`App.tsx`](pathname:///rdg/App.tsx) and replace `src/App.tsx`.
```bash
curl -L -o src/App.tsx https://docs.sheetjs.com/rdg/App.tsx
```
2023-09-18 06:44:33 +00:00
4) Start the development server:
```bash
npm start
```
#### Testing
2024-04-26 04:16:13 +00:00
5) When the page loads, it will fetch https://docs.sheetjs.com/pres.numbers,
parse with SheetJS, and load the data in the data grid.
2023-09-18 06:44:33 +00:00
6) Click one of the "export" buttons to export the grid data to file.