This commit is contained in:
SheetJS 2023-12-04 22:46:54 -05:00
parent c76ec7f27d
commit e3d16d8108
69 changed files with 1958 additions and 516 deletions

@ -216,7 +216,7 @@ in the example JSX code:
```jsx title="Example JSX for displaying arrays of objects"
<table>
{/* The `thead` section includes the table header row */}
<thead><th>Name</th><th>Index</th></thead>
<thead><tr><th>Name</th><th>Index</th></tr></thead>
{/* The `tbody` section includes the data rows */}
<tbody>
{/* generate row (TR) for each president */}
@ -302,7 +302,7 @@ export default function SheetJSReactAoO() {
writeFileXLSX(wb, "SheetJSReactAoO.xlsx");
}, [pres]);
return (<table><thead><th>Name</th><th>Index</th></thead><tbody>
return (<table><thead><tr><th>Name</th><th>Index</th></tr></thead><tbody>
{ /* generate row for each president */
// highlight-start
pres.map(pres => (<tr>
@ -317,14 +317,18 @@ export default function SheetJSReactAoO() {
}
```
<details open><summary><b>How to run the example</b> (click to show)</summary>
<details open><summary><b>How to run the example</b> (click to hide)</summary>
<Tabs groupId="starter">
<TabItem name="vite" value="ViteJS">
:::note
:::note Tested Deployments
This demo was last tested on 2023 October 08 with ViteJS 4.4.1 and React 18.2.0
This demo was tested in the following environments:
| ReactJS | ViteJS | Date |
|:---------|:--------|:-----------|
| `18.2.0` | `5.0.5` | 2023-12-04 |
:::
@ -348,7 +352,7 @@ npm run dev`}
4) Replace `src/App.jsx` 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`.
and the page will attempt to download `SheetJSReactAoO.xlsx`.
5) Build the site:
@ -370,7 +374,7 @@ and test the page.
</TabItem>
<TabItem name="CRA" value="create-react-app">
:::note
:::note Tested Deployments
This demo was last run on 2023 October 24 using `create-react-app@5.0.1` and
`react-scripts@5.0.1`.
@ -397,7 +401,7 @@ npm start`}
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`.
and the page will attempt to download `SheetJSReactAoO.xlsx`.
5) Build the site:
@ -474,12 +478,12 @@ export default function SheetJSReactHTML() {
}
```
<details open><summary><b>How to run the example</b> (click to show)</summary>
<details open><summary><b>How to run the example</b> (click to hide)</summary>
<Tabs groupId="starter">
<TabItem name="vite" value="ViteJS">
:::note
:::note Tested Deployments
This demo was last tested on 2023 October 08 with ViteJS 4.4.1 and React 18.2.0
@ -527,7 +531,7 @@ and test the page.
</TabItem>
<TabItem name="CRA" value="create-react-app">
:::note
:::note Tested Deployments
This demo was last run on 2023 October 24 using `create-react-app@5.0.1` and
`react-scripts@5.0.1`.

@ -241,7 +241,7 @@ const rows = ref([]);
<template>
<table>
<!-- The `thead` section includes the table header row -->
<thead><th>Name</th><th>Index</th></thead>
<thead><tr><th>Name</th><th>Index</th></tr></thead>
<!-- The `tbody` section includes the data rows -->
<tbody>
<!-- generate row (TR) for each president -->
@ -334,7 +334,7 @@ function exportFile() {
</script>
<template>
<table><thead><th>Name</th><th>Index</th></thead><tbody>
<table><thead><tr><th>Name</th><th>Index</th></tr></thead><tbody>
<tr v-for="(row, idx) in rows" :key="idx">
<td>{{ row.Name }}</td>
<td>{{ row.Index }}</td>
@ -352,8 +352,11 @@ function exportFile() {
:::note Tested Deployments
This demo was last run on 2023 November 09 using `vue@3.3.8`. When running
`npm init`, the package `create-vue@3.8.0` was installed.
This demo was tested in the following environments:
| VueJS | ViteJS | Date |
|:--------|:--------|:-----------|
| `3.3.9` | `4.5.1` | 2023-12-04 |
:::
@ -377,7 +380,7 @@ npm run dev`}
4) Replace `src/App.vue` with the `src/SheetJSVueAoO.vue` example.
The page will refresh and show a table with an Export button. Click the button
and the page will attempt to download `SheetJSVueAoA.xlsx`. There may be a delay
and the page will attempt to download `SheetJSVueAoO.xlsx`. There may be a delay
since Vite will try to optimize the SheetJS library on the fly.
5) Stop the dev server and build the site:
@ -427,7 +430,7 @@ npm run dev`}
4) Replace `App.vue` with the `src/SheetJSVueAoO.vue` example.
The page will refresh and show a table with an Export button. Click the button
and the page will attempt to download `SheetJSVueAoA.xlsx`.
and the page will attempt to download `SheetJSVueAoO.xlsx`.
5) Stop the dev server and build the site:

@ -219,7 +219,7 @@ storied syntax, instead opting for a `@for` block reminiscent of JavaScript[^4].
```html title="Example Template for displaying arrays of objects (Angular 2-16)"
<div class="content" role="main"><table>
<thead><th>Name</th><th>Index</th></thead>
<thead><tr><th>Name</th><th>Index</th></tr></thead>
<tbody>
// highlight-start
<tr *ngFor="let row of rows">
@ -236,7 +236,7 @@ storied syntax, instead opting for a `@for` block reminiscent of JavaScript[^4].
```html title="Example Template for displaying arrays of objects (Angular 17+)"
<div class="content" role="main"><table>
<thead><th>Name</th><th>Index</th></thead>
<thead><tr><th>Name</th><th>Index</th></tr></thead>
<tbody>
// highlight-start
@for(row of rows; track $index) { <tr>
@ -311,7 +311,7 @@ interface President { Name: string; Index: number };
selector: 'app-root',
template: `
<div class="content" role="main"><table>
<thead><th>Name</th><th>Index</th></thead>
<thead><tr><th>Name</th><th>Index</th></tr></thead>
<tbody>
// highlight-start
<tr *ngFor="let row of rows">
@ -367,7 +367,7 @@ interface President { Name: string; Index: number };
standalone: true,
template: `
<div class="content" role="main"><table>
<thead><th>Name</th><th>Index</th></thead>
<thead><tr><th>Name</th><th>Index</th></tr></thead>
<tbody>
// highlight-start
@for(row of rows; track $index) {
@ -414,11 +414,16 @@ export class AppComponent {
</TabItem>
</Tabs>
<details open><summary><b>How to run the example</b> (click to show)</summary>
<details open><summary><b>How to run the example</b> (click to hide)</summary>
:::note Tested Deployments
This demo was last run on 2023-11-18 using Angular 17.0.3 and CLI `17.0.1`
This demo was tested in the following environments:
| Angular | Date |
|:---------|:-----------|
| `17.0.5` | 2023-12-04 |
| `16.2.7` | 2023-10-22 |
:::
@ -431,7 +436,7 @@ npx @angular/cli analytics disable -g
1) Create a new project:
```bash
npx @angular/cli@17.0.1 new --minimal --defaults --no-interactive sheetjs-angular
npx @angular/cli@17.0.5 new --minimal --defaults --no-interactive sheetjs-angular
```
2) Install the SheetJS dependency and start the dev server:
@ -590,7 +595,7 @@ export class AppComponent {
</TabItem>
</Tabs>
<details open><summary><b>How to run the example</b> (click to show)</summary>
<details open><summary><b>How to run the example</b> (click to hide)</summary>
:::note Tested Deployments

@ -115,7 +115,7 @@ function exportFile() {
</script>
<main>
<table><thead><th>Name</th><th>Index</th></thead><tbody>
<table><thead><tr><th>Name</th><th>Index</th></tr></thead><tbody>
<!-- highlight-start -->
{#each pres as p}<tr>
<td>{p.Name}</td>
@ -128,16 +128,23 @@ function exportFile() {
</main>
```
<details open><summary><b>How to run the example</b> (click to show)</summary>
<details open><summary><b>How to run the example</b> (click to hide)</summary>
:::note
:::note Tested Deployments
This demo was last run on 2023 August 27 using `svelte@4.2.0`. When running
`npm create`, the package `create-vite@4.4.1` was installed.
This demo was tested in the following environments:
| Svelte | ViteJS | Date |
|:--------|:--------|:-----------|
| `4.2.8` | `5.0.5` | 2023-12-04 |
:::
1) Run `npm create vite@latest sheetjs-svelte -- --template svelte-ts`.
1) Create a new project:
```bash
npm create vite@latest sheetjs-svelte -- --template svelte-ts
```
2) Install the SheetJS dependency and start the dev server:
@ -156,8 +163,22 @@ The page will refresh and show a table with an Export button. Click the button
and the page will attempt to download `SheetJSSvelteAoA.xlsx`. There may be a
delay since Vite will try to optimize the SheetJS library on the fly.
5) Build the site with `npm run build`, then test with `npx http-server dist`.
Access `http://localhost:8080` with a web browser to test the bundled site.
5) Build the site:
```bash
npm run build
```
The generated site will be placed in the `dist` folder.
6) Start a local web server:
```bash
npx http-server dist
```
Access the displayed URL (typically `http://localhost:8080`) with a web browser
and test the page.
</details>
@ -206,16 +227,23 @@ function exportFile() {
</main>
```
<details open><summary><b>How to run the example</b> (click to show)</summary>
<details open><summary><b>How to run the example</b> (click to hide)</summary>
:::note
:::note Tested Deployments
This demo was last run on 2023 August 27 using `svelte@4.2.0`. When running
`npm create`, the package `create-vite@4.4.1` was installed.
This demo was tested in the following environments:
| Svelte | ViteJS | Date |
|:--------|:--------|:-----------|
| `4.2.8` | `5.0.5` | 2023-12-04 |
:::
1) Run `npm create vite@latest sheetjs-svelte -- --template svelte-ts`.
1) Create a new project:
```bash
npm create vite@latest sheetjs-svelte -- --template svelte-ts
```
2) Install the SheetJS dependency and start the dev server:
@ -234,7 +262,21 @@ The page will refresh and show a table with an Export button. Click the button
and the page will attempt to download `SheetJSSvelteHTML.xlsx`. There may be a
delay since Vite will try to optimize the SheetJS library on the fly.
5) Build the site with `npm run build`, then test with `npx http-server dist`.
Access `http://localhost:8080` with a web browser to test the bundled site.
5) Build the site:
```bash
npm run build
```
The generated site will be placed in the `dist` folder.
6) Start a local web server:
```bash
npx http-server dist
```
Access the displayed URL (typically `http://localhost:8080`) with a web browser
and test the page.
</details>

@ -32,7 +32,12 @@ models and data flow strategies.
:::note Tested Deployments
This demo was last run on 2023 November 19 using AngularJS `1.8.2`
This demo was tested in the following environments:
| Version | Date |
|:------------------|:-----------|
| `1.8.2` (latest) | 2023-12-04 |
| `1.2.32` (legacy) | 2023-12-04 |
:::
@ -294,7 +299,7 @@ However, this does not handle merge cells well!
The `sheet_to_html` function generates HTML that is aware of merges and other
worksheet features. The generated HTML does not contain any `<script>` tags,
and should therefore be safe to pass to an `ng-bind-html` binding. This approach
requires the `ngSanitize` plugin.
requires the `ngSanitize` plugin[^4].
```html
<div ng-controller="sheetjs">
@ -381,4 +386,5 @@ URL with a web browser (typically `http://localhost:8080`)
[^1]: See [`$http`](https://docs.angularjs.org/api/ng/service/$http) in the AngularJS documentation.
[^2]: See ["Workbook Object"](/docs/csf/book)
[^3]: See ["Creating Directives"](https://docs.angularjs.org/guide/directive#creating-a-directive-that-manipulates-the-dom) in the AngularJS documentation.
[^3]: See ["Creating Directives"](https://docs.angularjs.org/guide/directive#creating-a-directive-that-manipulates-the-dom) in the AngularJS documentation.
[^4]: See [`ngSanitize`](https://docs.angularjs.org/api/ngSanitize) in the AngularJS documentation.

@ -72,7 +72,7 @@ The script <https://docs.sheetjs.com/dojo/dojo.js> was fetched from the official
:::note Tested Deployments
The demos were last tested on 2023-11-27.
The demos were last tested on 2023-12-04.
Demos exclusively using Dojo Core were tested using Dojo Toolkit `1.17.3`.
@ -151,7 +151,7 @@ in the first worksheet, and assigns to a `dijit` UI Widget:
```html
<script>
require([
"dojo/ready", "dojo/request/xhr", "dojo/store/Memory" "dijit/registry", "xlsx"
"dojo/ready", "dojo/request/xhr", "dojo/store/Memory", "dijit/registry", "xlsx"
], function(ready, xhr, Memory, registry, _XLSX) {
ready(function() {
/* fetch test file */

@ -203,6 +203,12 @@ KnockoutJS was a popular MVVM framework.
The [Live demo](pathname:///knockout/knockout.html) shows a view model that is
updated with file data and exported to spreadsheets.
:::note Tested Deployments
This demo was last run on 2023 December 04 using KnockoutJS `3.4.2`
:::
<details><summary><b>Full Exposition</b> (click to show)</summary>
**State**

@ -17,7 +17,7 @@ import CodeBlock from '@theme/CodeBlock';
data from spreadsheets.
This demo uses ViteJS and SheetJS to export data. We'll explore how to add
SheetJS to a site using Browserify and how to export data to spreadsheets.
SheetJS to a site using ViteJS and how to export data to spreadsheets.
:::info pass
@ -26,9 +26,23 @@ loaders. They are ideal for static sites pulling data from sheets at build time.
:::
:::note
:::note pass
This demo was last tested on 2023 October 21 against ViteJS `4.5.0`
This demo focuses on integration details with the ViteJS bundler.
The demos follow the ["Export Tutorial"](/docs/getting-started/examples/export),
which covers SheetJS library usage in more detail.
:::
:::note Tested Deployments
This demo was tested in the following environments:
| ViteJS | Date |
|:---------|:-----------|
| `5.0.5` | 2023-12-04 |
| `4.5.0` | 2023-12-04 |
:::
@ -89,6 +103,10 @@ const raw_data: President[] = await (await fetch(url)).json();
/* filter for the Presidents */
const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez"));
/* sort by first presidential term */
prez.forEach(row => row.start = row.terms.find(term => term.type === "prez").start);
prez.sort((l,r) => l.start.localeCompare(r.start));
/* flatten objects */
const rows = prez.map(row => ({
name: row.name.first + " " + row.name.last,

@ -25,15 +25,6 @@ bundle with ESBuild for browser use.
- ["NodeJS"](#nodejs) explores how to import SheetJS libraries in a script and
bundle with ESBuild for NodeJS use.
:::note pass
This demo focuses on integration details with the ESBuild bundler.
The demos follow the ["Export Tutorial"](/docs/getting-started/examples/export).
The tutorial covers SheetJS library usage.
:::
:::info pass
The [ESBuild section of the Content demo](/docs/demos/static/esbuild) covers
@ -41,9 +32,23 @@ loaders. They are ideal for static sites pulling data from sheets at build time.
:::
:::note
:::note pass
This demo was last tested on 2023 October 19 against esbuild `0.19.5`
This demo focuses on integration details with the ESBuild bundler.
The demos follow the ["Export Tutorial"](/docs/getting-started/examples/export),
which covers SheetJS library usage in more detail.
:::
:::note Tested Deployments
This demo was tested in the following environments:
| ESBuild | Date |
|:----------|:-----------|
| `0.14.14` | 2023-12-04 |
| `0.19.8` | 2023-12-04 |
:::
@ -71,7 +76,7 @@ Assuming the primary source file is `in.js`, the following command will bundle
the script and generate `out.js`:
```bash
npx -y esbuild@0.19.5 in.js --bundle --outfile=out.js
npx -y esbuild@0.19.8 in.js --bundle --outfile=out.js
```
### Browser Demo
@ -120,7 +125,7 @@ curl -LO https://docs.sheetjs.com/esbuild/esbrowser.js
4) Create bundle:
```bash
npx -y esbuild@0.19.5 esbrowser.js --bundle --outfile=esb.browser.js
npx -y esbuild@0.19.8 esbrowser.js --bundle --outfile=esb.browser.js
```
5) Start a local HTTP server:
@ -160,7 +165,7 @@ Assuming the primary source file is `in.js`, the following command will bundle
the script for NodeJS and generate `out.js`:
```bash
npx -y esbuild@0.19.5 in.js --bundle --platform=node --outfile=out.js
npx -y esbuild@0.19.8 in.js --bundle --platform=node --outfile=out.js
```
### NodeJS Demo
@ -209,7 +214,7 @@ curl -LO https://docs.sheetjs.com/esbuild/esbnode.js
3) Create bundle:
```bash
npx -y esbuild@0.19.5 esbnode.js --bundle --platform=node --outfile=esb.node.js
npx -y esbuild@0.19.8 esbnode.js --bundle --platform=node --outfile=esb.node.js
```
4) Run the bundle:

@ -26,16 +26,25 @@ loaders. They are ideal for static sites pulling data from sheets at build time.
:::
:::note
:::note pass
This demo was tested against the following Webpack versions:
This demo focuses on integration details with the Webpack bundler.
The demos follow the ["Export Tutorial"](/docs/getting-started/examples/export),
which covers SheetJS library usage in more detail.
:::
:::note Tested Deployments
This demo was tested in the following environments:
| Version | Date | Required Workarounds |
|:---------|:-----------|:------------------------------------|
| `2.7.0` | 2023-10-17 | Import `xlsx/dist/xlsx.full.min.js` |
| `3.12.0` | 2023-10-17 | Import `xlsx/dist/xlsx.full.min.js` |
| `4.47.0` | 2023-10-17 | Downgrade NodeJS (tested v16.20.2) |
| `5.89.0` | 2023-10-17 | |
| `5.89.0` | 2023-12-04 | |
:::
@ -304,12 +313,14 @@ npx webpack --mode=production
</html>
```
6) Start a local HTTP server and go to `http://localhost:8080/`
6) Start a local HTTP server:
```bash
npx http-server .
```
7) Load the displayed URL (typically `http://localhost:8080/`) in a web browser.
Click on "Click here to export" to generate a file.
## Miscellany

@ -19,9 +19,23 @@ data from spreadsheets.
This demo uses Browserify and SheetJS to export data. We'll explore how to add
SheetJS to a site using Browserify and how to export data to spreadsheets.
:::note
:::note pass
This demo was last tested on 2023 October 21 against Browserify `17.0.0`
This demo focuses on integration details with the Browserify bundler.
The demos follow the ["Export Tutorial"](/docs/getting-started/examples/export),
which covers SheetJS library usage in more detail.
:::
:::note Tested Deployments
This demo was tested in the following environments:
| Browserify | Date |
|:-----------|:-----------|
| `17.0.0` | 2023-12-04 |
| `3.46.1` | 2023-12-04 |
:::
@ -119,16 +133,21 @@ document.getElementById("xport").addEventListener("click", function() {
3) Bundle the scripts:
```bash
npx browserify app.js > browserify.js
npx browserify index.js > index.min.js
```
4) Spin up a local web server:
:::caution pass
Legacy `browserify` versions must use a local version. For version `3.46.1`:
```bash
npx http-server
npm install --save browserify@3.46.1
./node_modules/.bin/browserify index.js > index.min.js
```
5) Create a small HTML page that loads the script. Save to `index.html`:
:::
4) Create a small HTML page that loads the script. Save to `index.html`:
```html title="index.html"
<!DOCTYPE html>
@ -142,10 +161,12 @@ npx http-server
</html>
```
6) Start a local HTTP server and go to `http://localhost:8080/`
5) Start a local HTTP server:
```bash
npx http-server .
```
6) Load the displayed URL (typically `http://localhost:8080/`) in a web browser.
Click on "Click here to export" to generate a file.

@ -25,9 +25,23 @@ The [Live demo](pathname:///requirejs/requirejs.html) loads RequireJS from the
CDN, uses it to load the standalone script from the SheetJS CDN, and uses the
`XLSX` variable to create a button click handler that creates a workbook.
:::note
:::note pass
This demo was last tested on 2023 October 18 against RequireJS `2.3.6`
This demo focuses on integration details with the RequireJS loader.
The demos follow the ["Export Tutorial"](/docs/getting-started/examples/export),
which covers SheetJS library usage in more detail.
:::
:::note Tested Deployments
This demo was tested in the following environments:
| RequireJS | Date |
|:----------|:-----------|
| `2.3.6` | 2023-12-04 |
| `2.1.22` | 2023-12-04 |
:::
@ -114,6 +128,7 @@ curl -LO https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js`}
<body>
<h1>SheetJS Presidents Demo</h1>
<button id="xport">Click here to export</button>
<!-- highlight-next-line -->
<script src="http://requirejs.org/docs/release/2.3.6/comments/require.js"></script>
<script>
/* Wire up RequireJS */
@ -130,6 +145,17 @@ require.config({
</html>
```
:::note pass
To change the RequireJS version, change the version in the highlighted line. For
example, the following script corresponds to RequireJS `2.1.22`:
```html
<script src="http://requirejs.org/docs/release/2.1.22/comments/require.js"></script>
```
:::
2) Save the following to `SheetJSRequire.js`:
```js title="SheetJSRequire.js"
@ -142,6 +168,10 @@ require(["xlsx"], function(XLSX) {
/* filter for the Presidents */
var prez = raw_data.filter(function(row) { return row.terms.some(function(term) { return term.type === "prez"; }); });
/* sort by first presidential term */
prez.forEach(function(row) { row.start = row.terms.find(function(term) {return term.type === "prez"; }).start; });
prez.sort(function(l,r) { return l.start.localeCompare(r.start); });
/* flatten objects */
var rows = prez.map(function(row) { return {
name: row.name.first + " " + row.name.last,
@ -176,17 +206,19 @@ uses normal functions and traditional Promise chains.
:::
3) Start a local HTTP server, then go to `http://localhost:8080/`
3) Start a local HTTP server:
```bash
npx http-server .
```
4) Load the displayed URL (typically `http://localhost:8080/`) in a web browser.
Click on "Click here to export" to generate a file.
### r.js Optimizer
4) Create `build.js` configuration for the optimizer:
5) Create `build.js` configuration for the optimizer:
```js title="build.js"
({
@ -199,12 +231,23 @@ Click on "Click here to export" to generate a file.
});
```
5) Run the `r.js` optimizer to create `SheetJSRequire.min.js`:
6) Run the `r.js` optimizer to create `SheetJSRequire.min.js`:
```bash
npx -p requirejs@2.3.6 r.js -o build.js
```
:::note pass
To change the RequireJS version, change the version in the command. For example,
the following command uses RequireJS `2.1.22` to generate an optimized script:
```bash
npx -p requirejs@2.1.22 r.js -o build.js
```
:::
6) Save the following to `optimized.html`:
```html title="optimized.html"
@ -214,12 +257,24 @@ npx -p requirejs@2.3.6 r.js -o build.js
<body>
<h1>SheetJS Presidents Demo</h1>
<button id="xport">Click here to export</button>
<script src="http://requirejs.org/docs/release/2.3.3/comments/require.js"></script>
<!-- highlight-next-line -->
<script src="http://requirejs.org/docs/release/2.3.6/comments/require.js"></script>
<script src="SheetJSRequire.min.js"></script>
</body>
</html>
```
7) Open `http://localhost:8080/optimized.html`
:::note pass
To change the RequireJS version, change the version in the highlighted line. For
example, the following script corresponds to RequireJS `2.1.22`:
```html
<script src="http://requirejs.org/docs/release/2.1.22/comments/require.js"></script>
```
:::
7) Open `optimized.html` in the browser (`http://localhost:8080/optimized.html`)
Click on "Click here to export" to generate a file.

@ -31,16 +31,26 @@ other tools using SystemJS have switched to Webpack.
:::
:::note
:::note pass
This demo was tested against the following SystemJS versions:
This demo focuses on integration details with the SystemJS loader.
| Version | Date |
|:----------|:-----------|
| `0.19.47` | 2023-10-18 |
| `0.20.19` | 2023-10-18 |
| `0.21.6` | 2023-10-18 |
| `6.14.2` | 2023-10-18 |
The demos follow the ["Export Tutorial"](/docs/getting-started/examples/export),
which covers SheetJS library usage in more detail.
:::
:::note Tested Deployments
This demo was tested in the following environments:
| Version | Platform | Date |
|:----------|:---------|:-----------|
| `0.19.47` | NodeJS | 2023-10-18 |
| `0.20.16` | Browser | 2023-12-04 |
| `0.20.19` | NodeJS | 2023-10-18 |
| `0.21.6` | NodeJS | 2023-10-18 |
| `6.14.2` | NodeJS | 2023-12-04 |
:::

@ -19,9 +19,23 @@ data from spreadsheets.
This demo uses RollupJS and SheetJS to export data. We'll explore how to bundle
SheetJS in a site using RollupJS and how to export data to spreadsheets.
:::note
:::note pass
This demo was last tested on 2023 October 21 against RollupJS 4.1.4
This demo focuses on integration details with the RollupJS bundler.
The demos follow the ["Export Tutorial"](/docs/getting-started/examples/export),
which covers SheetJS library usage in more detail.
:::
:::note Tested Deployments
This demo was tested in the following environments:
| Version | Date |
|:--------|:-----------|
| `4.6.1` | 2023-12-04 |
| `4.1.4` | 2023-10-21 |
:::
@ -62,17 +76,17 @@ npm init -y
<Tabs groupId="pm">
<TabItem value="npm" label="npm">
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} rollup@4.1.4 @rollup/plugin-node-resolve
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} rollup@4.6.1 @rollup/plugin-node-resolve
</CodeBlock>
</TabItem>
<TabItem value="pnpm" label="pnpm">
<CodeBlock language="bash">{`\
pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} rollup@4.1.4 @rollup/plugin-node-resolve
pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} rollup@4.6.1 @rollup/plugin-node-resolve
</CodeBlock>
</TabItem>
<TabItem value="yarn" label="Yarn" default>
<CodeBlock language="bash">{`\
yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} rollup@4.1.4 @rollup/plugin-node-resolve
yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} rollup@4.6.1 @rollup/plugin-node-resolve
</CodeBlock>
</TabItem>
</Tabs>
@ -91,6 +105,10 @@ const raw_data = await (await fetch(url)).json();
/* filter for the Presidents */
const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez"));
/* sort by first presidential term */
prez.forEach(row => row.start = row.terms.find(term => term.type === "prez").start);
prez.sort((l,r) => l.start.localeCompare(r.start));
/* flatten objects */
const rows = prez.map(row => ({
name: row.name.first + " " + row.name.last,

@ -19,9 +19,23 @@ data from spreadsheets.
This demo uses ParcelJS and SheetJS to export data. We'll explore how to bundle
SheetJS in a site using ParcelJS and how to export data to spreadsheets.
:::note
:::note pass
This demo was last tested on 2023 October 21 against parcel `2.10.0`
This demo focuses on integration details with the ParcelJS bundler.
The demos follow the ["Export Tutorial"](/docs/getting-started/examples/export),
which covers SheetJS library usage in more detail.
:::
:::note Tested Deployments
This demo was tested in the following environments:
| Version | Date |
|:---------|:-----------|
| `2.10.3` | 2023-12-04 |
| `1.12.3` | 2023-12-04 |
:::
@ -78,6 +92,10 @@ document.getElementById("xport").onclick = async() => {
/* filter for the Presidents */
const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez"));
/* sort by first presidential term */
prez.forEach(row => row.start = row.terms.find(term => term.type === "prez").start);
prez.sort((l,r) => l.start.localeCompare(r.start));
/* flatten objects */
const rows = prez.map(row => ({
name: row.name.first + " " + row.name.last,
@ -103,6 +121,67 @@ document.getElementById("xport").onclick = async() => {
<body>
```
:::caution pass
**ParcelJS v1 did not support `import` statements within inline scripts.**
For ParcelJS version 1, the entire script should be copied to `index.js` and the
main `index.html` page should load the `index.js` script:
<details><summary><b>ParcelJS v1 example</b> (click to show)</summary>
```html title="index.html"
<body>
<h3>SheetJS <span id="vers"></span> export demo</h3>
<button id="xport">Click to Export!</button>
<script src="index.js"></script>
<body>
```
```js title="index.js"
// ESM-style import from "xlsx"
import { utils, version, writeFileXLSX } from 'xlsx';
document.getElementById("vers").innerText = version;
document.getElementById("xport").onclick = async() => {
/* fetch JSON data and parse */
const url = "https://sheetjs.com/data/executive.json";
const raw_data = await (await fetch(url)).json();
/* filter for the Presidents */
const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez"));
/* sort by first presidential term */
prez.forEach(row => row.start = row.terms.find(term => term.type === "prez").start);
prez.sort((l,r) => l.start.localeCompare(r.start));
/* flatten objects */
const rows = prez.map(row => ({
name: row.name.first + " " + row.name.last,
birthday: row.bio.birthday
}));
/* generate worksheet and workbook */
const worksheet = utils.json_to_sheet(rows);
const workbook = utils.book_new();
utils.book_append_sheet(workbook, worksheet, "Dates");
/* fix headers */
utils.sheet_add_aoa(worksheet, [["Name", "Birthday"]], { origin: "A1" });
/* calculate column width */
const max_width = rows.reduce((w, r) => Math.max(w, r.name.length), 10);
worksheet["!cols"] = [ { wch: max_width } ];
/* create an XLSX file and try to save to Presidents.xlsx */
writeFileXLSX(workbook, "Presidents.xlsx");
};
```
</details>
:::
2) Install the SheetJS NodeJS module:
<Tabs groupId="pm">
@ -128,7 +207,7 @@ yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
3) Run the ParcelJS development server:
```bash
npx -y parcel@2.10.0 index.html
npx -y parcel@2.10.3 index.html
```
The process will print a URL:

@ -20,9 +20,22 @@ data from spreadsheets.
This demo uses `spack` and SheetJS to export data. We'll explore how to bundle
SheetJS in a site using `spack` and how to export data to spreadsheets.
:::note
:::note pass
This demo was last tested on 2023 October 20 against SWC 1.2.246
This demo focuses on integration details with the `spack` bundler.
The demos follow the ["Export Tutorial"](/docs/getting-started/examples/export),
which covers SheetJS library usage in more detail.
:::
:::note Tested Deployments
This demo was tested in the following environments:
| Version | Date |
|:----------|:-----------|
| `1.2.246` | 2023-12-04 |
:::
@ -52,12 +65,14 @@ import { utils, writeFile } from 'xlsx';
:::warning pass
When this demo was tested against the latest version, `spack` crashed:
When this demo was tested against the `@swc/core@1.3.100`, `spack` crashed:
```
thread '<unnamed>' panicked at 'cannot access a scoped thread local variable without calling `set` first',
```
**This is a bug in SWC**
Until the bug is fixed, it is strongly recommended to use `@swc/core@1.2.246`.
:::
@ -112,6 +127,10 @@ const raw_data = await (await fetch(url)).json();
/* filter for the Presidents */
const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez"));
/* sort by first presidential term */
prez.forEach(row => row.start = row.terms.find(term => term.type === "prez").start);
prez.sort((l,r) => l.start.localeCompare(r.start));
/* flatten objects */
const rows = prez.map(row => ({
name: row.name.first + " " + row.name.last,
@ -174,7 +193,7 @@ This command will create the script `lib/web.js`
6) Start a local HTTP server, then go to `http://localhost:8080/`
```bash
npx http-server
npx http-server .
```
Click on "Click here to export" to generate a file.

@ -47,9 +47,13 @@ Snowpack works with no caveats.
<details><summary><b>Complete Example</b> (click to show)</summary>
:::note
:::note Tested Deployments
This demo was last tested on 2023 October 21 against Snowpack `3.8.8`
This demo was tested in the following environments:
| Version | Date |
|:--------|:-----------|
| `3.8.8` | 2023-12-04 |
:::
@ -95,6 +99,10 @@ const raw_data = await (await fetch(url)).json();
/* filter for the Presidents */
const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez"));
/* sort by first presidential term */
prez.forEach(row => row.start = row.terms.find(term => term.type === "prez").start);
prez.sort((l,r) => l.start.localeCompare(r.start));
/* flatten objects */
const rows = prez.map(row => ({
name: row.name.first + " " + row.name.last,
@ -160,9 +168,13 @@ WMR works with no caveats.
<details><summary><b>Complete Example</b> (click to show)</summary>
:::note
:::note Tested Deployments
This demo was last tested on 2023 Oct 21 against WMR `3.8.0`
This demo was tested in the following environments:
| Version | Date |
|:--------|:-----------|
| `3.8.0` | 2023-12-04 |
:::
@ -208,6 +220,10 @@ const raw_data = await (await fetch(url)).json();
/* filter for the Presidents */
const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez"));
/* sort by first presidential term */
prez.forEach(row => row.start = row.terms.find(term => term.type === "prez").start);
prez.sort((l,r) => l.start.localeCompare(r.start));
/* flatten objects */
const rows = prez.map(row => ({
name: row.name.first + " " + row.name.last,

@ -1,4 +1,4 @@
{
"label": "Web Frameworks",
"position": 1
"position": 2
}

@ -64,4 +64,8 @@ The following demos are in separate pages:
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>
})}
<li><a href="/docs/demos/frontend/bundler#dojo">Dojo Toolkit</a></li>
<li><a href="/docs/demos/frontend/bundler#snowpack">Snowpack</a></li>
<li><a href="/docs/demos/frontend/bundler#wmr">WMR</a></li>
</ul>

@ -365,7 +365,7 @@ function SheetJSPreviewPSTSheets() {
<p>Use the file input to select a file, or click "Use a Sample PST"</p>
<input type="file" accept=".pst" onChange={chg}/>
<button onClick={doit}>Use a Sample PST!</button><br/><br/>
<table><thead><th colspan="3">Attachments</th></thead>
<table><thead><tr><th colspan="3">Attachments</th></tr></thead>
<tbody>{files.map((f,j) => (
<tr key={j}><th>{f.filename}</th>
<td><a onClick={()=>view(j)}>(preview)</a></td>

@ -14,9 +14,9 @@ With a familiar UI, `x-spreadsheet` is an excellent choice for a modern editor.
[Click here for a live standalone integration demo.](pathname:///xspreadsheet/)
:::note
:::note Tested Deployments
This demo was last verified on 2023 September 03.
This demo was last verified on 2023 December 04.
:::

@ -13,9 +13,9 @@ with a straightforward API.
[Click here for a live standalone integration demo.](pathname:///cdg/)
:::note
:::note Tested Deployments
This demo was last verified on 2023 September 03.
This demo was last verified on 2023 December 04.
:::

@ -9,8 +9,8 @@ import CodeBlock from '@theme/CodeBlock';
:::note Tested Deployments
This demo was tested against `vue3-table-lite 1.3.9`, VueJS `3.3.7` and ViteJS
`4.5.0` on 2023 November 03.
This demo was tested against `vue3-table-lite 1.3.9`, VueJS `3.3.10` and ViteJS
`5.0.5` on 2023 December 04.
:::
@ -114,7 +114,7 @@ cd sheetjs-vtl
2) Install dependencies:
<CodeBlock language="bash">{`\
npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz vue3-table-lite@1.2.4`}
npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz vue3-table-lite@1.3.9`}
</CodeBlock>
3) Download [`src/App.vue`](pathname:///vtl/App.vue) and replace the contents:

@ -24,9 +24,9 @@ user-supplied sheets and exports data to XLSX workbooks:
![Glide Data Grid example](pathname:///gdg/gdg.png)
:::note
:::note Tested Deployments
This demo was last tested on 2023 September 08 with Glide Data Grid 5.2.1
This demo was last tested on 2023 December 04 with Glide Data Grid 5.3.2
:::
@ -38,7 +38,7 @@ installation with Yarn and other package managers.
Using the `npm` tool, this command installs SheetJS and Glide Data Grid:
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz @glideapps/glide-data-grid@5.2.1`}
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz @glideapps/glide-data-grid@5.3.2`}
</CodeBlock>
Methods and components in both libraries can be loaded in pages using `import`:
@ -340,10 +340,10 @@ cd sheetjs-gdg
npm i
```
2) Install SheetJS and Glide Data Grid required dependencies:
2) Install SheetJS and Glide Data Grid libraries:
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz @glideapps/glide-data-grid@5.2.1`}
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz @glideapps/glide-data-grid@5.3.2`}
</CodeBlock>
3) Start dev server:

@ -7,19 +7,59 @@ pagination_next: demos/net/index
import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';
:::note
[React Data Grid](https://adazzle.github.io/react-data-grid/) is a data grid
designed for the ReactJS web framework.
This demo was last tested on 2023 September 17 with `react-data-grid` version
`7.0.0-beta.39` and React 18.2.0.
[SheetJS](https://sheetjs.com) is a JavaScript library for reading and writing
data from spreadsheets.
:::
This demo uses React Data Grid and SheetJS to pull data from a spreadsheet and
display the content in a data grid. We'll explore how to import data from files
into the data grid and how to export modified data from the grid to workbooks.
The demo creates a site that looks like the screenshot below:
The ["Demo"](#demo) section includes a complete example that displays data from
user-supplied sheets and exports data to XLSX workbooks:
![react-data-grid screenshot](pathname:///rdg/rdg1.png)
:::note Tested Deployments
This demo was tested in the following environments:
| Version | Date | Notes |
|:----------------|:-----------|:---------------------|
| `7.0.0-beta.19` | 2023-12-04 | |
| `7.0.0-beta.41` | 2023-12-04 | Editing did not work |
:::
:::warning pass
When this demo was last tested, the grid correctly displayed data but could not
be edited by the user.
The current recommendation is to use version `7.0.0-beta.19`.
:::
## Integration Details
[The "Frameworks" section](/docs/getting-started/installation/frameworks) covers
installation with Yarn and other package managers.
Using the `npm` tool, this command installs SheetJS and React Data Grid:
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz react-data-grid@7.0.0-beta.41`}
</CodeBlock>
Methods and components in both libraries can be loaded in pages using `import`:
```js
import { read, utils, writeFile } from 'xlsx';
import DataGrid, { Column } from "react-data-grid";
```
#### Rows and Columns state
`react-data-grid` state consists of an Array of column metadata and an Array of
@ -116,7 +156,7 @@ cd sheetjs-rdg
2) Install dependencies:
<CodeBlock language="bash">{`\
npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz react-data-grid@7.0.0-beta.39`}
npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz react-data-grid@7.0.0-beta.41`}
</CodeBlock>
3) Download [`App.tsx`](pathname:///rdg/App.tsx) and replace `src/App.tsx`.

@ -9,6 +9,11 @@ import CodeBlock from '@theme/CodeBlock';
This demo covers the traditional Material UI Table as well as the MUI Data Grid.
## Integration Details
[The "Frameworks" section](/docs/getting-started/installation/frameworks) covers
installation in projects using Material UI.
## Material UI Table
The `Table` component abstracts the `<table>` element in HTML. `table_to_book`
@ -18,8 +23,10 @@ can process a `ref` attached to the `Table` element:
import TableContainer from '@mui/material/TableContainer';
import Table from '@mui/material/Table';
// ...
// highlight-next-line
// highlight-start
import { utils, writeFileXLSX } from "xlsx";
import { useRef } from "react";
// highlight-end
// ...
export default function BasicTable() {
@ -41,13 +48,11 @@ export default function BasicTable() {
}
```
#### MUI Table Demo
### MUI Table Demo
<details open><summary><b>Complete Example</b> (click to hide)</summary>
:::note Tested Deployments
:::note
This demo was last run on 2023 October 12 against Material UI 5.14.13 paired
This demo was last run on 2023 December 04 against Material UI 5.14.19 paired
with Emotion 11.11.1
:::
@ -62,7 +67,7 @@ cd sheetjs-mui
2) Install dependencies:
<CodeBlock language="bash">{`\
npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz @mui/material@5.14.13 @emotion/react@11.11.1 @emotion/styled@11.11.0`}
npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz @mui/material@5.14.19 @emotion/react@11.11.1 @emotion/styled@11.11.0`}
</CodeBlock>