fixes for reading dates in Chrome

Author: reviewher

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>
 

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;
 }

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>
 

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.