react
This commit is contained in:
parent
def028682c
commit
653457f8f2
@ -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
|
||||
|
@ -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
|
||||
|
||||
|
@ -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
|
||||
|
||||
|
@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Svelte
|
||||
pagination_prev: demos/index
|
||||
pagination_next: demos/mobile/index
|
||||
pagination_next: demos/grid/index
|
||||
sidebar_position: 4
|
||||
---
|
||||
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -1,5 +1,4 @@
|
||||
{
|
||||
"label": "Web Frameworks",
|
||||
"position": 1,
|
||||
"collapsed": false
|
||||
"position": 1
|
||||
}
|
@ -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';
|
||||
|
118
docz/docs/03-demos/02-grid/01-xs.md
Normal file
118
docz/docs/03-demos/02-grid/01-xs.md
Normal file
@ -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).
|
4
docz/docs/03-demos/02-grid/_category_.json
Normal file
4
docz/docs/03-demos/02-grid/_category_.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"label": "Data Grids and Tables",
|
||||
"position": 2
|
||||
}
|
@ -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");
|
@ -1,4 +0,0 @@
|
||||
{
|
||||
"label": "Desktop Applications",
|
||||
"position": 3
|
||||
}
|
@ -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>);
|
||||
}
|
||||
```
|
4
docz/docs/03-demos/03-net/_category_.json
Normal file
4
docz/docs/03-demos/03-net/_category_.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"label": "Servers and Remote Data",
|
||||
"position": 3
|
||||
}
|
25
docz/docs/03-demos/03-net/index.md
Normal file
25
docz/docs/03-demos/03-net/index.md
Normal file
@ -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>
|
@ -1,5 +0,0 @@
|
||||
{
|
||||
"label": "Cloud Platforms",
|
||||
"position": 4,
|
||||
"collapsed": false
|
||||
}
|
@ -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
|
||||
---
|
@ -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
|
||||
---
|
@ -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
|
||||
---
|
@ -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
|
@ -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
|
@ -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
|
@ -1,4 +1,4 @@
|
||||
{
|
||||
"label": "Content and Static Sites",
|
||||
"position": 11
|
||||
"position": 4
|
||||
}
|
@ -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';
|
@ -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:
|
@ -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:
|
@ -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:
|
@ -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:
|
@ -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:
|
@ -1,4 +1,4 @@
|
||||
{
|
||||
"label": "iOS and Android Apps",
|
||||
"position": 2
|
||||
"position": 5
|
||||
}
|
@ -1,6 +1,6 @@
|
||||
---
|
||||
title: iOS and Android Apps
|
||||
pagination_prev: demos/frontend/index
|
||||
pagination_prev: demos/static/index
|
||||
pagination_next: demos/desktop/index
|
||||
---
|
||||
|
@ -1,5 +0,0 @@
|
||||
{
|
||||
"label": "Databases and Stores",
|
||||
"position": 6,
|
||||
"collapsed": false
|
||||
}
|
@ -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
|
@ -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
|
@ -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
|
@ -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
|
@ -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
|
@ -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
|
@ -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
|
4
docz/docs/03-demos/06-desktop/_category_.json
Normal file
4
docz/docs/03-demos/06-desktop/_category_.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"label": "Desktop and CLI Tools",
|
||||
"position": 6
|
||||
}
|
@ -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.
|
||||
|
||||
:::
|
||||
|
@ -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
|
@ -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>
|
||||
</> );
|
@ -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 }}/>
|
||||
</>);
|
||||
</> );
|
||||
}
|
||||
```
|
||||
|
@ -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
|
||||
---
|
@ -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>
|
||||
</> );
|
@ -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
|
||||
---
|
@ -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
|
||||
---
|
@ -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
|
||||
---
|
4
docz/docs/03-demos/07-data/_category_.json
Normal file
4
docz/docs/03-demos/07-data/_category_.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"label": "Databases and Stores",
|
||||
"position": 7
|
||||
}
|
@ -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';
|
@ -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
|
@ -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
|
4
docz/docs/03-demos/08-local/_category_.json
Normal file
4
docz/docs/03-demos/08-local/_category_.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"label": "Local Data",
|
||||
"position": 8
|
||||
}
|
24
docz/docs/03-demos/08-local/index.md
Normal file
24
docz/docs/03-demos/08-local/index.md
Normal file
@ -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>
|
@ -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".
|
@ -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
|
@ -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';
|
@ -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
|
@ -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>
|
@ -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
|
@ -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
|
@ -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
|
4
docz/docs/03-demos/09-cloud/_category_.json
Normal file
4
docz/docs/03-demos/09-cloud/_category_.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"label": "Cloud Platforms",
|
||||
"position": 9
|
||||
}
|
@ -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';
|
@ -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';
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -1,5 +1,4 @@
|
||||
{
|
||||
"label": "App Extensions",
|
||||
"position": 10,
|
||||
"collapsed": false
|
||||
"position": 10
|
||||
}
|
@ -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';
|
||||
|