react

docz/docs/03-demos/01-frontend/01-react.md

@@ -1,7 +1,7 @@
 ---
 title: ReactJS
 pagination_prev: demos/index
-pagination_next: demos/mobile/index
+pagination_next: demos/grid/index
 sidebar_position: 1
 ---
 
@@ -118,6 +118,38 @@ export default function SheetJSReactAoO() {
 }
 ```
 
+<details open><summary><b>How to run the example</b> (click to show)</summary>
+
+:::note
+
+This demo was last run on 2023 February 28 using `create-react-app@5.0.1` and
+`react-scripts@5.0.1`.
+
+:::
+
+1) Run `npx create-react-app@5.0.1 --scripts-version=5.0.1 sheetjs-react`.
+
+2) Install the SheetJS dependency and start the dev server:
+
+```bash
+cd sheetjs-react
+npm install
+npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz
+npm start
+```
+
+3) Open a web browser and access the displayed URL (`http://localhost:3000`)
+
+4) Replace `src/App.js` with the `src/SheetJSReactAoO.js` example.
+
+The page will refresh and show a table with an Export button.  Click the button
+and the page will attempt to download `SheetJSReactAoA.xlsx`.
+
+5) Build the site with `npm run build`, then test with `npx http-server build`.
+Access `http://localhost:8080` with a web browser to test the bundled site.
+
+</details>
+
 ### HTML
 
 The main disadvantage of the Array of Objects approach is the specific nature
@@ -162,10 +194,42 @@ export default function SheetJSReactHTML() {
     <button onClick={exportFile}>Export XLSX</button>
   // highlight-next-line
     <div ref={tbl} dangerouslySetInnerHTML={{ __html }} />
-  </>);
+  </> );
 }
 ```
 
+<details open><summary><b>How to run the example</b> (click to show)</summary>
+
+:::note
+
+This demo was last run on 2023 February 28 using `create-react-app@5.0.1` and
+`react-scripts@5.0.1`.
+
+:::
+
+1) Run `npx create-react-app@5.0.1 --scripts-version=5.0.1 sheetjs-react`.
+
+2) Install the SheetJS dependency and start the dev server:
+
+```bash
+cd sheetjs-react
+npm install
+npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz
+npm start
+```
+
+3) Open a web browser and access the displayed URL (`http://localhost:3000`)
+
+4) Replace `src/App.js` with the `src/SheetJSReactHTML.js` example.
+
+The page will refresh and show a table with an Export button.  Click the button
+and the page will attempt to download `SheetJSReactHTML.xlsx`.
+
+5) Build the site with `npm run build`, then test with `npx http-server build`.
+Access `http://localhost:8080` with a web browser to test the bundled site.
+
+</details>
+
 ### Rows and Columns
 
 Some data grids and UI components split worksheet state in two parts: an array

docz/docs/03-demos/01-frontend/02-vue.md

@@ -1,7 +1,7 @@
 ---
 title: VueJS
 pagination_prev: demos/index
-pagination_next: demos/mobile/index
+pagination_next: demos/grid/index
 sidebar_position: 2
 ---
 
@@ -114,7 +114,7 @@ function exportFile() {
 </template>
 ```
 
-<details><summary><b>How to run the example</b> (click to show)</summary>
+<details open><summary><b>How to run the example</b> (click to show)</summary>
 
 :::note
 
@@ -190,7 +190,7 @@ function exportFile() {
 </template>
 ```
 
-<details><summary><b>How to run the example</b> (click to show)</summary>
+<details open><summary><b>How to run the example</b> (click to show)</summary>
 
 :::note
 

docz/docs/03-demos/01-frontend/03-angular.md

@@ -1,7 +1,7 @@
 ---
 title: Angular
 pagination_prev: demos/index
-pagination_next: demos/mobile/index
+pagination_next: demos/grid/index
 sidebar_position: 3
 ---
 
@@ -148,7 +148,7 @@ export class AppComponent {
 }
 ```
 
-<details><summary><b>How to run the example</b> (click to show)</summary>
+<details open><summary><b>How to run the example</b> (click to show)</summary>
 
 :::note
 
@@ -236,7 +236,7 @@ export class AppComponent {
 }
 ```
 
-<details><summary><b>How to run the example</b> (click to show)</summary>
+<details open><summary><b>How to run the example</b> (click to show)</summary>
 
 :::note
 

docz/docs/03-demos/01-frontend/04-svelte.md

@@ -1,7 +1,7 @@
 ---
 title: Svelte
 pagination_prev: demos/index
-pagination_next: demos/mobile/index
+pagination_next: demos/grid/index
 sidebar_position: 4
 ---
 

docz/docs/03-demos/01-frontend/08-bundler.md

@@ -1,7 +1,7 @@
 ---
 title: Bundlers
 pagination_prev: demos/index
-pagination_next: demos/mobile/index
+pagination_next: demos/grid/index
 sidebar_position: 8
 sidebar_custom_props:
   skip: 1

docz/docs/03-demos/01-frontend/09-legacy.md

@@ -1,7 +1,7 @@
 ---
 title: Legacy Frameworks
 pagination_prev: demos/index
-pagination_next: demos/mobile/index
+pagination_next: demos/grid/index
 sidebar_position: 9
 sidebar_custom_props:
   skip: 1

docz/docs/03-demos/01-frontend/_category_.json

@@ -1,5 +1,4 @@
 {
   "label": "Web Frameworks",
-  "position": 1,
-  "collapsed": false
+  "position": 1
 }

docz/docs/03-demos/01-frontend/index.md

@@ -1,7 +1,7 @@
 ---
 title: Web Frameworks
 pagination_prev: demos/index
-pagination_next: demos/mobile/index
+pagination_next: demos/grid/index
 ---
 
 import DocCardList from '@theme/DocCardList';

docz/docs/03-demos/02-grid/01-xs.md

@@ -0,0 +1,118 @@
+---
+title: x-spreadsheet
+pagination_prev: demos/frontend/index
+pagination_next: demos/net/index
+---
+
+<head>
+  <script src="https://cdn.sheetjs.com/xspreadsheet/xlsxspread.js"></script>
+  <link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet/dist/xspreadsheet.css"/>
+  <script src="https://unpkg.com/x-data-spreadsheet/dist/xspreadsheet.js"></script>
+</head>
+
+With a familiar UI, `x-spreadsheet` is an excellent choice for a modern editor.
+
+[Click here for a live standalone integration demo.](pathname:///xspreadsheet/)
+
+## Live Demo
+
+:::note
+
+Due to CSS conflicts between the data grid and the documentation generator,
+features like scrolling may not work as expected.
+
+[The linked demo uses a simple HTML page.](pathname:///xspreadsheet/)
+
+:::
+
+```jsx live
+function SheetJSXSpread() {
+  const [url, setUrl] = React.useState("https://sheetjs.com/pres.numbers");
+  const [done, setDone] = React.useState(false);
+  const ref = React.useRef();
+  const set_url = React.useCallback((evt) => setUrl(evt.target.value));
+
+  return ( <>
+    <div height={300} width={300} ref={ref}/>
+    {!done && ( <>
+      <b>URL: </b><input type="text" value={url} onChange={set_url} size="50"/>
+      <br/><button onClick={async() => {
+        /* fetch and parse workbook */
+        const wb = XLSX.read(await (await fetch(url)).arrayBuffer());
+        /* set up grid and load data */
+        x_spreadsheet(ref.current).loadData(stox(wb));
+        setDone(true);
+      }}><b>Fetch!</b></button>
+    </>)}
+  </> );
+}
+```
+
+## Integration Library
+
+The integration library can be downloaded from the SheetJS CDN:
+
+- [Development Use](https://cdn.sheetjs.com/xspreadsheet/xlsxspread.js)
+- [Production Use](https://cdn.sheetjs.com/xspreadsheet/xlsxspread.min.js)
+
+When used in a browser tag, it exposes two functions: `xtos` and `stox`.
+
+- `stox(worksheet)` returns a data structure suitable for `grid.loadData`
+- `xtos(data)` accepts the result of `grid.getData` and generates a workbook
+
+### Reading Data
+
+The following snippet fetches a spreadsheet and loads the grid:
+
+```js
+(async() => {
+  const ab = await (await fetch("https://sheetjs.com/pres.numbers")).arrayBuffer();
+  grid.loadData(stox(XLSX.read(ab)));
+})();
+```
+
+The same pattern can be used in file input elements and other data sources.
+
+### Writing Data
+
+The following snippet exports the grid data to a file:
+
+```js
+/* build workbook from the grid data */
+XLSX.writeFile(xtos(grid.getData()), "SheetJS.xlsx");
+```
+
+## Other Details
+
+#### Obtaining the Library
+
+The `x-data-spreadsheet` NodeJS packages include a minified script that can be
+directly inserted as a script tag.  The unpkg CDN also serves this script:
+
+```html
+<!-- x-spreadsheet stylesheet -->
+<link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet/dist/xspreadsheet.css"/>
+<!-- x-spreadsheet library -->
+<script src="https://unpkg.com/x-data-spreadsheet/dist/xspreadsheet.js"></script>
+```
+
+#### Previewing and Editing Data
+
+The HTML document needs a container element:
+
+```html
+<div id="gridctr"></div>
+```
+
+Grid initialization is a one-liner:
+
+```js
+var grid = x_spreadsheet(document.getElementById("gridctr"));
+```
+
+`x-spreadsheet` handles the entire edit cycle. No intervention is necessary.
+
+#### Additional Features
+
+This demo barely scratches the surface.  The underlying grid component includes
+many additional features that work with [SheetJS Pro](https://sheetjs.com/pro).

docz/docs/03-demos/02-grid/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Data Grids and Tables",
+  "position": 2
+}

docz/docs/03-demos/02-grid/index.md

@@ -1,7 +1,7 @@
 ---
 title: Data Grids and Tables
-pagination_prev: demos/cloud/index
-pagination_next: demos/data/index
+pagination_prev: demos/frontend/index
+pagination_next: demos/net/index
 ---
 
 Various JavaScript UI components provide a more interactive editing experience.
@@ -30,83 +30,11 @@ it is easier to process an array of arrays.
 
 ### x-spreadsheet
 
-With a familiar UI, [`x-spreadsheet`](https://myliang.github.io/x-spreadsheet/)
-is an excellent choice for developers looking for a modern editor.
+With a familiar UI, `x-spreadsheet` is an excellent choice for a modern editor.
 
 [Click here for a live integration demo.](pathname:///xspreadsheet/)
 
-<details><summary><b>Full Exposition</b> (click to show)</summary>
-
-**Obtaining the Library**
-
-The `x-data-spreadsheet` NodeJS packages include a minified script that can be
-directly inserted as a script tag.  The unpkg CDN also serves this script:
-
-```html
-<!-- x-spreadsheet stylesheet -->
-<link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet/dist/xspreadsheet.css"/>
-<!-- x-spreadsheet library -->
-<script src="https://unpkg.com/x-data-spreadsheet/dist/xspreadsheet.js"></script>
-```
-
-**Previewing and Editing Data**
-
-The HTML document needs a container element:
-
-```html
-<div id="gridctr"></div>
-```
-
-Grid initialization is a one-liner:
-
-```js
-var grid = x_spreadsheet(document.getElementById("gridctr"));
-```
-
-`x-spreadsheet` handles the entire edit cycle. No intervention is necessary.
-
-**SheetJS and x-spreadsheet**
-
-The integration library can be downloaded from the SheetJS CDN:
-
-[Development Use](https://cdn.sheetjs.com/xspreadsheet/xlsxspread.js)
-
-[Production Use](https://cdn.sheetjs.com/xspreadsheet/xlsxspread.min.js)
-
-
-When used in a browser tag, it exposes two functions: `xtos` and `stox`.
-
-- `stox(worksheet)` returns a data structure suitable for `grid.loadData`
-- `xtos(data)` accepts the result of `grid.getData` and generates a workbook
-
-_Reading Data_
-
-The following snippet fetches a spreadsheet and loads the grid:
-
-```js
-(async() => {
-  const ab = await (await fetch("https://sheetjs.com/pres.numbers")).arrayBuffer();
-  grid.loadData(stox(XLSX.read(ab)));
-})();
-```
-
-The same pattern can be used in file input elements and other data sources.
-
-_Writing Data_
-
-The following snippet exports the grid data to a file:
-
-```js
-/* build workbook from the grid data */
-XLSX.writeFile(xtos(grid.getData()), "SheetJS.xlsx");
-```
-
-**Additional Features**
-
-This demo barely scratches the surface.  The underlying grid component includes
-many additional features that work with [SheetJS Pro](https://sheetjs.com/pro).
-
-</details>
+[The exposition has been moved to a separate page.](/docs/demos/grid/xs)
 
 ### Canvas DataGrid
 
@@ -984,7 +912,7 @@ export default function ReactTable() {
     <table ref={tbl}>
     {/* ... TR and TD/TH elements ... */}
     </table>
-  </>);
+  </> );
 }
 ```
 
@@ -1003,7 +931,7 @@ import { useRef } from "react";
 export default function BasicTable() {
 // highlight-next-line
   const tbl = useRef<HTMLTableElement>(null);
-  return (<>
+  return ( <>
     <button onClick={() => {
       const wb = utils.table_to_book(tbl.current);
       writeFileXLSX(wb, "SheetJSMaterialUI.xlsx");

docz/docs/03-demos/03-desktop/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "Desktop Applications",
-  "position": 3
-}

docz/docs/03-demos/03-net/01-network.mdx

@@ -126,7 +126,7 @@ function SheetJSXHRDL() {
     req.send();
   }, []);
 
-  return (<div dangerouslySetInnerHTML={{ __html }}/>);
+  return ( <div dangerouslySetInnerHTML={{ __html }}/> );
 }
 ```
 
@@ -181,10 +181,10 @@ function SheetJSXHRUL() {
   return (<pre>
     <b>CSV Data</b>
     <div>{csv}</div>
-    {sz ? (<>
+    {sz ? ( <>
       <b>Generated file size: {sz} bytes</b>
       <div dangerouslySetInnerHTML={{ __html }}/>
-    </>) : (<button onClick={xport}><b>Export and Upload!</b></button>)}
+    </> ) : (<button onClick={xport}><b>Export and Upload!</b></button>)}
   </pre>);
 }
 ```
@@ -233,7 +233,7 @@ function SheetJSFetchDL() {
     setHTML(XLSX.utils.sheet_to_html(ws));
   }, []);
 
-  return (<div dangerouslySetInnerHTML={{ __html }}/>);
+  return ( <div dangerouslySetInnerHTML={{ __html }}/> );
 }
 ```
 
@@ -278,10 +278,10 @@ function SheetJSFetchUL() {
   return (<pre>
     <b>CSV Data</b>
     <div>{csv}</div>
-    {sz ? (<>
+    {sz ? ( <>
       <b>Generated file size: {sz} bytes</b>
       <div dangerouslySetInnerHTML={{ __html }}/>
-    </>) : (<button onClick={xport}><b>Export and Upload!</b></button>)}
+    </> ) : (<button onClick={xport}><b>Export and Upload!</b></button>)}
   </pre>);
 }
 ```
@@ -342,7 +342,7 @@ function SheetJSAxiosDL() {
     setHTML(XLSX.utils.sheet_to_html(ws));
   }, []);
 
-  return (<div dangerouslySetInnerHTML={{ __html }}/>);
+  return ( <div dangerouslySetInnerHTML={{ __html }}/> );
 }
 ```
 
@@ -386,10 +386,10 @@ function SheetJSAxiosUL() {
   return (<pre>
     <b>CSV Data</b>
     <div>{csv}</div>
-    {sz ? (<>
+    {sz ? ( <>
       <b>Generated file size: {sz} bytes</b>
       <div dangerouslySetInnerHTML={{ __html }}/>
-    </>) : (<button onClick={xport}><b>Export and Upload!</b></button>)}
+    </> ) : (<button onClick={xport}><b>Export and Upload!</b></button>)}
   </pre>);
 }
 ```
@@ -448,7 +448,7 @@ function SheetJSSuperAgentDL() {
       });
   }, []);
 
-  return (<div dangerouslySetInnerHTML={{ __html }}/>);
+  return ( <div dangerouslySetInnerHTML={{ __html }}/> );
 }
 ```
 
@@ -494,10 +494,10 @@ function SheetJSSuperAgentUL() {
   return (<pre>
     <b>CSV Data</b>
     <div>{csv}</div>
-    {sz ? (<>
+    {sz ? ( <>
       <b>Generated file size: {sz} bytes</b>
       <div dangerouslySetInnerHTML={{ __html }}/>
-    </>) : (<button onClick={xport}><b>Export and Upload!</b></button>)}
+    </> ) : (<button onClick={xport}><b>Export and Upload!</b></button>)}
   </pre>);
 }
 ```

docz/docs/03-demos/03-net/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Servers and Remote Data",
+  "position": 3
+}

docz/docs/03-demos/03-net/index.md

@@ -0,0 +1,25 @@
+---
+title: Servers and Remote Data
+pagination_prev: demos/grid/index
+pagination_next: demos/static/index
+---
+
+import DocCardList from '@theme/DocCardList';
+import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
+
+SheetJS libraries are commonly used in data pipelines for processing personally
+identifiable information (PII).  The libraries never attempt to perform network
+requests and never collect telemetry.
+
+In practice, there are many interesting networking use cases including server
+processing of user-submitted files and fetching files from an external source.
+The demos in this section cover common use cases:
+
+<ul>{useCurrentSidebarCategory().items.map((item, index) => {
+  const listyle = (item.customProps?.icon) ? {
+    listStyleImage: `url("${item.customProps.icon}")`
+  } : {};
+  return (<li style={listyle} {...(item.customProps?.class ? {className: item.customProps.class}: {})}>
+    <a href={item.href}>{item.label}</a>{item.customProps?.summary && (" - " + item.customProps.summary)}
+  </li>);
+})}</ul>

docz/docs/03-demos/04-cloud/_category_.json

@@ -1,5 +0,0 @@
-{
-  "label": "Cloud Platforms",
-  "position": 4,
-  "collapsed": false
-}

docz/docs/03-demos/04-static/01-lume.md

@@ -1,7 +1,7 @@
 ---
 title: Lume
-pagination_prev: demos/extensions/index
-pagination_next: demos/cli
+pagination_prev: demos/net/index
+pagination_next: demos/mobile/index
 sidebar_custom_props:
   type: native
 ---

docz/docs/03-demos/04-static/02-gatsbyjs.md

@@ -1,7 +1,7 @@
 ---
 title: GatsbyJS
-pagination_prev: demos/extensions/index
-pagination_next: demos/cli
+pagination_prev: demos/net/index
+pagination_next: demos/mobile/index
 sidebar_custom_props:
   type: native
 ---

docz/docs/03-demos/04-static/05-vitejs.md

@@ -1,7 +1,7 @@
 ---
 title: ViteJS
-pagination_prev: demos/extensions/index
-pagination_next: demos/cli
+pagination_prev: demos/net/index
+pagination_next: demos/mobile/index
 sidebar_custom_props:
   type: bundler
 ---

docz/docs/03-demos/04-static/08-nextjs.md

@@ -1,7 +1,7 @@
 ---
 title: NextJS
-pagination_prev: demos/extensions/index
-pagination_next: demos/cli
+pagination_prev: demos/net/index
+pagination_next: demos/mobile/index
 ---
 
 :::note

docz/docs/03-demos/04-static/09-nuxtjs.md

@@ -1,22 +1,12 @@
 ---
 title: NuxtJS
-pagination_prev: demos/extensions/index
-pagination_next: demos/cli
+pagination_prev: demos/net/index
+pagination_next: demos/mobile/index
 ---
 
 `@nuxt/content` is a file-based CMS for Nuxt, enabling static-site generation
 and on-demand server rendering powered by spreadsheets.
 
-:::warning
-
-Nuxt Content `v2` (NuxtJS `v3`) employs a different architecture from `v1`.
-There are known bugs related to corrupted binary spreadsheet files.
-
-Greenfield projects should stick to the stable NuxtJS + Nuxt Content versions
-until the issues are resolved.
-
-:::
-
 ## Nuxt Content v1
 
 :::note

docz/docs/03-demos/04-static/10-astro.md

@@ -1,7 +1,7 @@
 ---
 title: AstroJS
-pagination_prev: demos/extensions/index
-pagination_next: demos/cli
+pagination_prev: demos/net/index
+pagination_next: demos/mobile/index
 ---
 
 :::note

docz/docs/03-demos/04-static/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "Content and Static Sites",
-  "position": 11
+  "position": 4
 }

docz/docs/03-demos/04-static/index.md

@@ -1,7 +1,7 @@
 ---
 title: Content and Static Sites
-pagination_prev: demos/extensions/index
-pagination_next: demos/cli
+pagination_prev: demos/net/index
+pagination_next: demos/mobile/index
 ---
 
 import DocCardList from '@theme/DocCardList';

docz/docs/03-demos/05-mobile/01-reactnative.md

@@ -1,6 +1,6 @@
 ---
 title: React Native
-pagination_prev: demos/frontend/index
+pagination_prev: demos/static/index
 pagination_next: demos/desktop/index
 sidebar_position: 1
 sidebar_custom_props:

docz/docs/03-demos/05-mobile/02-nativescript.md

@@ -1,6 +1,6 @@
 ---
 title: NativeScript
-pagination_prev: demos/frontend/index
+pagination_prev: demos/static/index
 pagination_next: demos/desktop/index
 sidebar_position: 2
 sidebar_custom_props:

docz/docs/03-demos/05-mobile/03-quasar.md

@@ -1,6 +1,6 @@
 ---
 title: Quasar
-pagination_prev: demos/frontend/index
+pagination_prev: demos/static/index
 pagination_next: demos/desktop/index
 sidebar_position: 3
 sidebar_custom_props:

docz/docs/03-demos/05-mobile/04-ionic.md

@@ -1,6 +1,6 @@
 ---
 title: Ionic
-pagination_prev: demos/frontend/index
+pagination_prev: demos/static/index
 pagination_next: demos/desktop/index
 sidebar_position: 4
 sidebar_custom_props:

docz/docs/03-demos/05-mobile/05-capacitor.md

@@ -1,6 +1,6 @@
 ---
 title: CapacitorJS
-pagination_prev: demos/frontend/index
+pagination_prev: demos/static/index
 pagination_next: demos/desktop/index
 sidebar_position: 5
 sidebar_custom_props:

docz/docs/03-demos/05-mobile/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "iOS and Android Apps",
-  "position": 2
+  "position": 5
 }

docz/docs/03-demos/05-mobile/index.md

@@ -1,6 +1,6 @@
 ---
 title: iOS and Android Apps
-pagination_prev: demos/frontend/index
+pagination_prev: demos/static/index
 pagination_next: demos/desktop/index
 ---
 

docz/docs/03-demos/06-data/_category_.json

@@ -1,5 +0,0 @@
-{
-  "label": "Databases and Stores",
-  "position": 6,
-  "collapsed": false
-}

docz/docs/03-demos/06-desktop/01-electron.md

@@ -1,7 +1,7 @@
 ---
 title: Electron
 pagination_prev: demos/mobile/index
-pagination_next: demos/cloud/index
+pagination_next: demos/data/index
 sidebar_position: 1
 sidebar_custom_props:
   summary: Embedded NodeJS + Chromium

docz/docs/03-demos/06-desktop/02-nwjs.md

@@ -1,7 +1,7 @@
 ---
 title: NW.js
 pagination_prev: demos/mobile/index
-pagination_next: demos/cloud/index
+pagination_next: demos/data/index
 sidebar_position: 2
 sidebar_custom_props:
   summary: Embedded Chromium + NodeJS

docz/docs/03-demos/06-desktop/03-wails.md

@@ -1,7 +1,7 @@
 ---
 title: Wails
 pagination_prev: demos/mobile/index
-pagination_next: demos/cloud/index
+pagination_next: demos/data/index
 sidebar_position: 3
 sidebar_custom_props:
   summary: Webview + Go Backend

docz/docs/03-demos/06-desktop/04-tauri.md

@@ -1,7 +1,7 @@
 ---
 title: Tauri
 pagination_prev: demos/mobile/index
-pagination_next: demos/cloud/index
+pagination_next: demos/data/index
 sidebar_position: 4
 sidebar_custom_props:
   summary: Webview + Rust Backend

docz/docs/03-demos/06-desktop/05-neutralino.md

@@ -1,7 +1,7 @@
 ---
 title: NeutralinoJS
 pagination_prev: demos/mobile/index
-pagination_next: demos/cloud/index
+pagination_next: demos/data/index
 sidebar_position: 5
 sidebar_custom_props:
   summary: Webview + Lightweight Extensions

docz/docs/03-demos/06-desktop/06-reactnative.md

@@ -1,7 +1,7 @@
 ---
 title: React Native
 pagination_prev: demos/mobile/index
-pagination_next: demos/cloud/index
+pagination_next: demos/data/index
 sidebar_position: 6
 sidebar_custom_props:
   summary: Native Components with React

docz/docs/03-demos/06-desktop/09-cli.md

@@ -1,7 +1,9 @@
 ---
 title: Command-Line Tools
-pagination_prev: demos/static/index
-pagination_next: demos/engines/index
+pagination_prev: demos/mobile/index
+pagination_next: demos/data/index
+sidebar_custom_props:
+  cli: true
 ---
 
 import current from '/version.js';
@@ -106,7 +108,7 @@ yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz exit-on-epi
 <Tabs>
   <TabItem value="nexe" label="Nexe">
 
-3) Run `nexe` and manually specify NodeJS version 14.15.3
+Run `nexe` and manually specify NodeJS version 14.15.3
 
 ```bash
 npx nexe -t 14.15.3 xlsx-cli.js
@@ -117,7 +119,7 @@ This generates `xlsx-cli` or `xlsx-cli.exe` depending on platform.
   </TabItem>
   <TabItem value="pkg" label="pkg">
 
-3) Run `pkg`:
+Run `pkg`:
 
 ```bash
 npx pkg xlsx-cli.js

docz/docs/03-demos/06-desktop/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Desktop and CLI Tools",
+  "position": 6
+}

docz/docs/03-demos/06-desktop/index.md

@@ -1,7 +1,7 @@
 ---
-title: Desktop Applications
+title: Desktop and CLI Tools
 pagination_prev: demos/mobile/index
-pagination_next: demos/cloud/index
+pagination_next: demos/data/index
 ---
 
 import DocCardList from '@theme/DocCardList';
@@ -11,9 +11,9 @@ Web technologies like JavaScript and HTML have been adapted to the traditional
 app space.  Typically these frameworks bundle a JavaScript engine as well as a
 windowing framework. SheetJS is compatible with many app frameworks.
 
-Demos for common tools are included in separate pages:
+Demos for common desktop tools are included in separate pages:
 
-<ul>{useCurrentSidebarCategory().items.map((item, index) => {
+<ul>{useCurrentSidebarCategory().items.filter(item => !item.customProps?.cli).map((item, index) => {
   const listyle = (item.customProps?.icon) ? {
     listStyleImage: `url("${item.customProps.icon}")`
   } : {};
@@ -22,7 +22,18 @@ Demos for common tools are included in separate pages:
   </li>);
 })}</ul>
 
-:::note Recommendation
+Demos for common command-line tools are included in separate pages:
+
+<ul>{useCurrentSidebarCategory().items.filter(item => item.customProps?.cli).map((item, index) => {
+  const listyle = (item.customProps?.icon) ? {
+    listStyleImage: `url("${item.customProps.icon}")`
+  } : {};
+  return (<li style={listyle} {...(item.customProps?.class ? {className: item.customProps.class}: {})}>
+    <a href={item.href}>{item.label}</a>{item.customProps?.summary && (" - " + item.customProps.summary)}
+  </li>);
+})}</ul>
+
+:::note Desktop Recommendation
 
 Electron is the most established and widely-used framework. With deep support
 for NodeJS modules and consistent user interfaces, it is the recommended choice
@@ -34,4 +45,3 @@ other programming languages.
 Frameworks like React Native generate applications that use native UI elements.
 
 :::
-

docz/docs/03-demos/07-data/01-websql.md

@@ -1,7 +1,7 @@
 ---
 title: WebSQL and SQLite
-pagination_prev: demos/grid
-pagination_next: demos/worker
+pagination_prev: demos/desktop/index
+pagination_next: demos/local/index
 sidebar_custom_props:
   type: web
   sql: true

docz/docs/03-demos/07-data/02-storageapi.md

@@ -1,7 +1,7 @@
 ---
 title: Local Storage API
-pagination_prev: demos/grid
-pagination_next: demos/worker
+pagination_prev: demos/desktop/index
+pagination_next: demos/local/index
 sidebar_custom_props:
   type: web
 ---
@@ -122,7 +122,7 @@ function SheetJStorage() {
   });
 
   return ( <>
-    {out && (<><a href={url}>{url}</a><pre>{out}</pre></>)}
+    {out && ( <><a href={url}>{url}</a><pre>{out}</pre></> )}
     <b>URL: </b><input type="text" value={url} onChange={set_url} size="50"/>
     <br/><button onClick={xport}><b>Fetch!</b></button>
   </> );

docz/docs/03-demos/07-data/03-indexeddb.md

@@ -1,7 +1,7 @@
 ---
 title: IndexedDB API
-pagination_prev: demos/grid
-pagination_next: demos/worker
+pagination_prev: demos/desktop/index
+pagination_next: demos/local/index
 sidebar_custom_props:
   type: web
 ---
@@ -144,7 +144,7 @@ fetches the data from the first worksheet in reverse:
 function SheetJSDexieImport(props) {
   const [__html, setHTML] = React.useState("Select a spreadsheet");
 
-  return (<>
+  return ( <>
     <input type="file" onChange={async(e) => { try {
       /* get data as an ArrayBuffer */
       const file = e.target.files[0];
@@ -177,7 +177,7 @@ function SheetJSDexieImport(props) {
       setHTML(rev.map(r => JSON.stringify(r)).join("\n"));
     } catch(e) { setHTML(e && e.message || e); }}}/>
     <pre dangerouslySetInnerHTML={{ __html }}/>
-  </>);
+  </> );
 }
 ```
 

docz/docs/03-demos/07-data/09-alasql.md

@@ -1,7 +1,7 @@
 ---
 title: AlaSQL
-pagination_prev: demos/grid
-pagination_next: demos/worker
+pagination_prev: demos/desktop/index
+pagination_next: demos/local/index
 sidebar_custom_props:
   sql: true
 ---

docz/docs/03-demos/07-data/10-sql.md

@@ -1,7 +1,7 @@
 ---
 title: SQL Connectors
-pagination_prev: demos/grid
-pagination_next: demos/worker
+pagination_prev: demos/desktop/index
+pagination_next: demos/local/index
 sidebar_custom_props:
   sql: true
 ---
@@ -127,7 +127,7 @@ function SheetJSQLWriter() {
     setOut(generate_sql(wb.Sheets[wsname], wsname).join("\n"));
   });
 
-  return ( <> {out && (<><a href={url}>{url}</a><pre>{out}</pre></>)}
+  return ( <> {out && ( <><a href={url}>{url}</a><pre>{out}</pre></> )}
     <b>URL: </b><input type="text" value={url} onChange={set_url} size="50"/>
     <br/><button onClick={xport}><b>Fetch!</b></button>
   </> );

docz/docs/03-demos/07-data/25-mongodb.md

@@ -1,7 +1,7 @@
 ---
 title: MongoDB
-pagination_prev: demos/grid
-pagination_next: demos/worker
+pagination_prev: demos/desktop/index
+pagination_next: demos/local/index
 sidebar_custom_props:
   type: document
 ---

docz/docs/03-demos/07-data/26-redis.md

@@ -1,7 +1,7 @@
 ---
 title: Redis
-pagination_prev: demos/grid
-pagination_next: demos/worker
+pagination_prev: demos/desktop/index
+pagination_next: demos/local/index
 sidebar_custom_props:
   type: nosql
 ---

docz/docs/03-demos/07-data/29-pouchdb.md

@@ -1,7 +1,7 @@
 ---
 title: PouchDB
-pagination_prev: demos/grid
-pagination_next: demos/worker
+pagination_prev: demos/desktop/index
+pagination_next: demos/local/index
 sidebar_custom_props:
   type: nosql
 ---

docz/docs/03-demos/07-data/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Databases and Stores",
+  "position": 7
+}

docz/docs/03-demos/07-data/index.md

@@ -1,7 +1,7 @@
 ---
 title: Databases and Stores
-pagination_prev: demos/grid
-pagination_next: demos/worker
+pagination_prev: demos/desktop/index
+pagination_next: demos/local/index
 ---
 
 import DocCardList from '@theme/DocCardList';

docz/docs/03-demos/08-local/01-file.md

@@ -1,5 +1,9 @@
 ---
 title: Local File Access
+pagination_prev: demos/data/index
+pagination_next: demos/cloud/index
+sidebar_custom_props:
+  summary: Reading and writing files using various platform APIs
 ---
 
 Reading and writing files require native platform support.  `XLSX.readFile` and

docz/docs/03-demos/08-local/05-clipboard.md

@@ -1,6 +1,9 @@
 ---
 title: Clipboard Data
-pagination_prev: demos/engines/index
+pagination_prev: demos/data/index
+pagination_next: demos/cloud/index
+sidebar_custom_props:
+  summary: Reading and writing data and files in the clipboard
 ---
 
 Spreadsheet software like Excel typically support copying and pasting cells and

docz/docs/03-demos/08-local/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Local Data",
+  "position": 8
+}

docz/docs/03-demos/08-local/index.md

@@ -0,0 +1,24 @@
+---
+title: Local Data
+pagination_prev: demos/data/index
+pagination_next: demos/cloud/index
+---
+
+import DocCardList from '@theme/DocCardList';
+import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
+
+There is no standard cross-platform approach to read and write files and data.
+`XLSX.readFile` and `XLSX.writeFile` rely on platform-specific APIs to perform
+the file read and write operations.  Not all platforms support the APIs used in
+the library.
+
+The demos in this section cover APIs that are not supported out-of-the-box:
+
+<ul>{useCurrentSidebarCategory().items.map((item, index) => {
+  const listyle = (item.customProps?.icon) ? {
+    listStyleImage: `url("${item.customProps.icon}")`
+  } : {};
+  return (<li style={listyle} {...(item.customProps?.class ? {className: item.customProps.class}: {})}>
+    <a href={item.href}>{item.label}</a>{item.customProps?.summary && (" - " + item.customProps.summary)}
+  </li>);
+})}</ul>

docz/docs/03-demos/09-cloud/01-salesforce.md

@@ -1,7 +1,7 @@
 ---
 title: Salesforce LWC
-pagination_prev: demos/desktop/index
-pagination_next: demos/grid
+pagination_prev: demos/local/index
+pagination_next: demos/extensions/index
 ---
 
 Salesforce apps can use third-party libraries in "Lightning Web Components".

docz/docs/03-demos/09-cloud/02-aws.md

@@ -1,7 +1,7 @@
 ---
 title: Amazon Web Services
-pagination_prev: demos/desktop/index
-pagination_next: demos/grid
+pagination_prev: demos/local/index
+pagination_next: demos/extensions/index
 ---
 
 AWS is a Cloud Services platform which includes traditional virtual machine

docz/docs/03-demos/09-cloud/03-gsheet.md

@@ -1,7 +1,7 @@
 ---
 title: Google Sheets
-pagination_prev: demos/desktop/index
-pagination_next: demos/grid
+pagination_prev: demos/local/index
+pagination_next: demos/extensions/index
 ---
 
 import Tabs from '@theme/Tabs';

docz/docs/03-demos/09-cloud/04-netsuite.md

@@ -1,7 +1,7 @@
 ---
 title: NetSuite
-pagination_prev: demos/desktop/index
-pagination_next: demos/grid
+pagination_prev: demos/local/index
+pagination_next: demos/extensions/index
 ---
 
 This demo discusses the key SheetJS operations.  Familiarity with SuiteScript 2

docz/docs/03-demos/09-cloud/05-dropbox.mdx

@@ -1,7 +1,7 @@
 ---
 title: Dropbox
-pagination_prev: demos/desktop/index
-pagination_next: demos/grid
+pagination_prev: demos/local/index
+pagination_next: demos/extensions/index
 ---
 
 <head>

docz/docs/03-demos/09-cloud/08-airtable.md

@@ -1,7 +1,7 @@
 ---
 title: Airtable
-pagination_prev: demos/desktop/index
-pagination_next: demos/grid
+pagination_prev: demos/local/index
+pagination_next: demos/extensions/index
 ---
 
 Airtable recommends Personal Access Tokens for interacting with their API. When

docz/docs/03-demos/09-cloud/09-azure.md

@@ -1,7 +1,7 @@
 ---
 title: Azure Cloud Services
-pagination_prev: demos/desktop/index
-pagination_next: demos/grid
+pagination_prev: demos/local/index
+pagination_next: demos/extensions/index
 ---
 
 Azure is a Cloud Services platform which includes traditional virtual machine

docz/docs/03-demos/09-cloud/10-github.md

@@ -1,7 +1,7 @@
 ---
 title: GitHub
-pagination_prev: demos/desktop/index
-pagination_next: demos/grid
+pagination_prev: demos/local/index
+pagination_next: demos/extensions/index
 ---
 
 Many official data releases by governments and organizations include XLSX or

docz/docs/03-demos/09-cloud/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Cloud Platforms",
+  "position": 9
+}

docz/docs/03-demos/09-cloud/index.md

@@ -1,7 +1,7 @@
 ---
 title: Cloud Platforms
-pagination_prev: demos/desktop/index
-pagination_next: demos/grid
+pagination_prev: demos/local/index
+pagination_next: demos/extensions/index
 ---
 
 import DocCardList from '@theme/DocCardList';

docz/docs/03-demos/10-extensions/01-extendscript.md

@@ -1,7 +1,7 @@
 ---
 title: Photoshop and Creative Suite
-pagination_prev: demos/server
-pagination_next: demos/static/index
+pagination_prev: demos/cloud/index
+pagination_next: demos/bigdata/index
 ---
 
 import Tabs from '@theme/Tabs';

docz/docs/03-demos/10-extensions/02-chromium.md

@@ -1,7 +1,7 @@
 ---
 title: Chrome and Chromium
-pagination_prev: demos/server
-pagination_next: demos/static/index
+pagination_prev: demos/cloud/index
+pagination_next: demos/bigdata/index
 ---
 
 :::warning

docz/docs/03-demos/10-extensions/03-excelapi.md

@@ -1,7 +1,7 @@
 ---
 title: Excel JavaScript API
-pagination_prev: demos/server
-pagination_next: demos/static/index
+pagination_prev: demos/cloud/index
+pagination_next: demos/bigdata/index
 ---
 
 :::info

docz/docs/03-demos/10-extensions/_category_.json

@@ -1,5 +1,4 @@
 {
   "label": "App Extensions",
-  "position": 10,
-  "collapsed": false
+  "position": 10
 }

docz/docs/03-demos/10-extensions/index.md

@@ -1,7 +1,7 @@
 ---
 title: Extensions
-pagination_prev: demos/server
-pagination_next: demos/static/index
+pagination_prev: demos/cloud/index
+pagination_next: demos/bigdata/index
 ---
 
 import DocCardList from '@theme/DocCardList';