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. is a live demo. +
+ Previewing data in a React data grid (click to show) + +[`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 ; +} +``` + +
+
Populating a database (SQL or no-SQL) (click to show) 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. is a live demo. +
+ Previewing data in a React data grid (click to show) + +[`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 ; +} +``` + +
+
Populating a database (SQL or no-SQL) (click to show) 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 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 ; +} +``` + + + The [`database` demo](/demos/database/) includes examples of working with databases and query results.