diff --git a/docz/docs/03-demos/01-frontend/01-react.md b/docz/docs/03-demos/01-frontend/01-react.md
index cbb9a0f..2f89ab3 100644
--- a/docz/docs/03-demos/01-frontend/01-react.md
+++ b/docz/docs/03-demos/01-frontend/01-react.md
@@ -15,7 +15,7 @@ Other demos cover general React deployments, including:
- [Static Site Generation powered by NextJS](/docs/demos/static/nextjs)
- [iOS and Android applications powered by React Native](/docs/demos/mobile/reactnative)
- [Desktop application powered by React Native Windows + macOS](/docs/demos/desktop/reactnative)
-- [React Data Grid UI component](/docs/demos/grid#react-data-grid)
+- [React Data Grid UI component](/docs/demos/grid/rdg)
- [Glide Data Grid UI component](/docs/demos/grid/gdg)
diff --git a/docz/docs/03-demos/02-grid/11-rdg.md b/docz/docs/03-demos/02-grid/11-rdg.md
new file mode 100644
index 0000000..b237260
--- /dev/null
+++ b/docz/docs/03-demos/02-grid/11-rdg.md
@@ -0,0 +1,127 @@
+---
+title: React Datagrid
+pagination_prev: demos/frontend/index
+pagination_next: demos/net/index
+---
+
+:::note
+
+This demo was last tested on 2023 April 18 with `react-data-grid 7.0.0-beta.28`,
+`create-react-app` 5.0.1 and React 18.2.0.
+
+:::
+
+
+The demo creates a site that looks like the screenshot below:
+
+
+
+## Integration Details
+
+#### 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 ( );
+}
+```
+
+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;
+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);
+}
+```
+
+:::caution
+
+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:
+
+```bash
+npm i -S https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz react-data-grid
+```
+
+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
+```
+
+4) run `npm start`. When you load the page in the browser, it will attempt to
+ fetch and load the data.
diff --git a/docz/docs/03-demos/02-grid/index.md b/docz/docs/03-demos/02-grid/index.md
index 329cce6..124ab4c 100644
--- a/docz/docs/03-demos/02-grid/index.md
+++ b/docz/docs/03-demos/02-grid/index.md
@@ -91,129 +91,7 @@ with other buttons and components on the page.
### React Data Grid
-:::note
-
-This demo was tested against `react-data-grid 7.0.0-beta.15`, React 18.2.0,
-and `create-react-app` 5.0.1 on 2022 August 16.
-
-:::
-
-
-
-#### RDG Demo
-
-
-
-Complete Example (click to show)
-
-1) Create a new TypeScript `create-react-app` app:
-
-```bash
-npx create-react-app sheetjs-cra --template typescript
-cd sheetjs-cra
-```
-
-2) Install dependencies:
-
-```bash
-npm i -S https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz react-data-grid
-```
-
-3) Download [`App.tsx`](pathname:///rdg/App.tsx) and replace `src/App.tsx`.
-
-4) run `npm start`. When you load the page in the browser, it will attempt to
- fetch and load the data.
-
-The following screenshot was taken from the demo:
-
-
-
-;
-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);
-}
-```
-
-:::caution
-
-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));
-}
-```
-
-:::
-
+**[The exposition has been moved to a separate page.](/docs/demos/grid/rdg)**
### Glide Data Grid
@@ -222,7 +100,7 @@ function rdg_to_ws(rows: Row[]): WorkSheet {
### Material UI Data Grid
Material UI Data Grid and React Data Grid share many state patterns and idioms.
-Differences from ["React Data Grid"](#react-data-grid) will be highlighted.
+Differences from ["React Data Grid"](/docs/demos/grid/rdg) will be highlighted.
[A complete example is included below.](#muidg-demo)
diff --git a/docz/docs/03-demos/04-static/01-lume.md b/docz/docs/03-demos/04-static/01-lume.md
index de96587..5ff7837 100644
--- a/docz/docs/03-demos/04-static/01-lume.md
+++ b/docz/docs/03-demos/04-static/01-lume.md
@@ -103,7 +103,7 @@ from the `"Presidents"` sheet:
:::note
-This was tested against `lume v1.15.3` on 2023 March 14.
+This was tested against `lume v1.16.2` on 2023 April 18.
This example uses the Nunjucks template format. Lume plugins support additional
template formats, including Markdown and JSX.
@@ -156,8 +156,16 @@ curl -L -o _data/pres.numbers https://sheetjs.com/pres.numbers
deno task lume --serve
```
-To verify it works, access http://localhost:3000 from your web browser.
-Adding a new row and saving `pres.numbers` should refresh the data
+To verify it works, access http://localhost:3000 from your web browser. Open
+`_data/pres.numbers` and add a new row to the bottom of the sheet. The page will
+refresh and show the new contents.
+
+:::caution
+
+There is a known bug with Deno hot reloading. If the page does not refresh
+automatically, upgrade with `deno upgrade` and restart the development server.
+
+:::
5) Stop the server (press `CTRL+C` in the terminal window) and run
diff --git a/docz/docs/03-demos/07-data/10-sql.md b/docz/docs/03-demos/07-data/10-sql.md
index 3200c23..69bcaef 100644
--- a/docz/docs/03-demos/07-data/10-sql.md
+++ b/docz/docs/03-demos/07-data/10-sql.md
@@ -143,66 +143,7 @@ types and other database minutiae.
**Knex**
-The result of a `SELECT` statement is an array of objects:
-
-```js
-const aoo = await connection.select("*").from("DataTable");
-const worksheet = XLSX.utils.json_to_sheet(aoa);
-```
-
-Knex wraps primitive types when creating a table. `generate_sql` takes a `knex`
-connection object and uses the API:
-
-Generating a Table (click to show)
-
-```js
-// define mapping between determined types and Knex types
-const PG = { "n": "float", "s": "text", "b": "boolean" };
-
-async function generate_sql(knex, ws, wsname) {
-
- // generate an array of objects from the data
- const aoo = XLSX.utils.sheet_to_json(ws);
-
- // types will map column headers to types, while hdr holds headers in order
- const types = {}, hdr = [];
-
- // loop across each row object
- aoo.forEach(row =>
- // Object.entries returns a row of [key, value] pairs. Loop across those
- Object.entries(row).forEach(([k,v]) => {
-
- // If this is first time seeing key, mark unknown and append header array
- if(!types[k]) { types[k] = "?"; hdr.push(k); }
-
- // skip null and undefined
- if(v == null) return;
-
- // check and resolve type
- switch(typeof v) {
- case "string": // strings are the broadest type
- types[k] = "s"; break;
- case "number": // if column is not string, number is the broadest type
- if(types[k] != "s") types[k] = "n"; break;
- case "boolean": // only mark boolean if column is unknown or boolean
- if("?b".includes(types[k])) types[k] = "b"; break;
- default: types[k] = "s"; break; // default to string type
- }
- })
- );
-
- await knex.schema.dropTableIfExists(wsname);
- await knex.schema.createTable(wsname, (table) => { hdr.forEach(h => { table[PG[types[h]] || "text"](h); }); });
- for(let i = 0; i < aoo.length; ++i) {
- if(!aoo[i] || !Object.keys(aoo[i]).length) continue;
- try { await knex.insert(aoo[i]).into(wsname); } catch(e) {}
- }
- return knex;
-}
-```
-
-