diff --git a/README.md b/README.md
index 8ffa936..58d1dba 100644
--- a/README.md
+++ b/README.md
@@ -1644,6 +1644,44 @@ data grid for previewing and modifying structured data in the web browser. The
`stox` function for converting from a workbook to x-spreadsheet data object.
<https://oss.sheetjs.com/sheetjs/x-spreadsheet> is a live demo.
+<details>
+ <summary><b>Previewing data in a React data grid</b> (click to show)</summary>
+
+[`react-data-grid`](https://npm.im/react-data-grid) is a data grid tailored for
+react. It expects two properties: `rows` of data objects and `columns` which
+describe the columns. For the purposes of massaging the data to fit the react
+data grid API it is easiest to start from an array of arrays:
+
+```js
+import { useEffect, useState } from "react";
+import DataGrid from "react-data-grid";
+import { read, utils } from "xlsx";
+
+const url = "https://oss.sheetjs.com/test_files/RkNumber.xls";
+
+export default function App() {
+ const [columns, setColumns] = useState([]);
+ const [rows, setRows] = useState([]);
+ useEffect(() => {(async () => {
+ const wb = read(await (await fetch(url)).arrayBuffer(), { WTF: 1 });
+
+ /* use sheet_to_json with header: 1 to generate an array of arrays */
+ const data = utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], { header: 1 });
+
+ /* see react-data-grid docs to understand the shape of the expected data */
+ setColumns(data[0].map((r) => ({ key: r, name: r })));
+ setRows(data.slice(1).map((r) => r.reduce((acc, x, i) => {
+ acc[data[0][i]] = x;
+ return acc;
+ }, {})));
+ })(); });
+
+ return <DataGrid columns={columns} rows={rows} />;
+}
+```
+
+</details>
+
<details>
<summary><b>Populating a database (SQL or no-SQL)</b> (click to show)</summary>
diff --git a/bits/20_jsutils.js b/bits/20_jsutils.js
index b72a49f..d062e59 100644
--- a/bits/20_jsutils.js
+++ b/bits/20_jsutils.js
@@ -139,13 +139,18 @@ function fuzzynum(s/*:string*/)/*:number*/ {
if(!isNaN(v = Number(ss))) return v / wt;
return v;
}
+var lower_months = ['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december'];
function fuzzydate(s/*:string*/)/*:Date*/ {
var o = new Date(s), n = new Date(NaN);
var y = o.getYear(), m = o.getMonth(), d = o.getDate();
if(isNaN(d)) return n;
+ var lower = s.toLowerCase();
+ if(lower.match(/jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec/)) {
+ lower = lower.replace(/[^a-z]/g,"");
+ if(lower.length > 3 && lower_months.indexOf(lower) == -1) return n;
+ } else if(lower.match(/[a-z]/)) return n;
if(y < 0 || y > 8099) return n;
if((m > 0 || d > 1) && y != 101) return o;
- if(s.toLowerCase().match(/jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec/)) return o;
if(s.match(/[^-0-9:,\/\\]/)) return n;
return o;
}
diff --git a/docbits/32_egress.md b/docbits/32_egress.md
index 562942d..4d8a665 100644
--- a/docbits/32_egress.md
+++ b/docbits/32_egress.md
@@ -40,6 +40,46 @@ data grid for previewing and modifying structured data in the web browser. The
`stox` function for converting from a workbook to x-spreadsheet data object.
<https://oss.sheetjs.com/sheetjs/x-spreadsheet> is a live demo.
+<details>
+ <summary><b>Previewing data in a React data grid</b> (click to show)</summary>
+
+[`react-data-grid`](https://npm.im/react-data-grid) is a data grid tailored for
+react. It expects two properties: `rows` of data objects and `columns` which
+describe the columns. For the purposes of massaging the data to fit the react
+data grid API it is easiest to start from an array of arrays.
+
+This demo starts by fetching a remote file and using `XLSX.read` to extract:
+
+```js
+import { useEffect, useState } from "react";
+import DataGrid from "react-data-grid";
+import { read, utils } from "xlsx";
+
+const url = "https://oss.sheetjs.com/test_files/RkNumber.xls";
+
+export default function App() {
+ const [columns, setColumns] = useState([]);
+ const [rows, setRows] = useState([]);
+ useEffect(() => {(async () => {
+ const wb = read(await (await fetch(url)).arrayBuffer(), { WTF: 1 });
+
+ /* use sheet_to_json with header: 1 to generate an array of arrays */
+ const data = utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], { header: 1 });
+
+ /* see react-data-grid docs to understand the shape of the expected data */
+ setColumns(data[0].map((r) => ({ key: r, name: r })));
+ setRows(data.slice(1).map((r) => r.reduce((acc, x, i) => {
+ acc[data[0][i]] = x;
+ return acc;
+ }, {})));
+ })(); });
+
+ return <DataGrid columns={columns} rows={rows} />;
+}
+```
+
+</details>
+
<details>
<summary><b>Populating a database (SQL or no-SQL)</b> (click to show)</summary>
diff --git a/misc/docs/README.md b/misc/docs/README.md
index 332265e..04465ba 100644
--- a/misc/docs/README.md
+++ b/misc/docs/README.md
@@ -1538,6 +1538,41 @@ data grid for previewing and modifying structured data in the web browser. The
<https://oss.sheetjs.com/sheetjs/x-spreadsheet> is a live demo.
+[`react-data-grid`](https://npm.im/react-data-grid) is a data grid tailored for
+react. It expects two properties: `rows` of data objects and `columns` which
+describe the columns. For the purposes of massaging the data to fit the react
+data grid API it is easiest to start from an array of arrays:
+
+```js
+import { useEffect, useState } from "react";
+import DataGrid from "react-data-grid";
+import { read, utils } from "xlsx";
+
+const url = "https://oss.sheetjs.com/test_files/RkNumber.xls";
+
+export default function App() {
+ const [columns, setColumns] = useState([]);
+ const [rows, setRows] = useState([]);
+ useEffect(() => {(async () => {
+ const wb = read(await (await fetch(url)).arrayBuffer(), { WTF: 1 });
+
+ /* use sheet_to_json with header: 1 to generate an array of arrays */
+ const data = utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], { header: 1 });
+
+ /* see react-data-grid docs to understand the shape of the expected data */
+ setColumns(data[0].map((r) => ({ key: r, name: r })));
+ setRows(data.slice(1).map((r) => r.reduce((acc, x, i) => {
+ acc[data[0][i]] = x;
+ return acc;
+ }, {})));
+ })(); });
+
+ return <DataGrid columns={columns} rows={rows} />;
+}
+```
+
+
+
The [`database` demo](/demos/database/) includes examples of working with
databases and query results.