refresh
This commit is contained in:
parent
c76ec7f27d
commit
e3d16d8108
@ -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:
|
||||
|
||||

|
||||
|
||||
:::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:
|
||||
|
||||

|
||||
|
||||
:::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>
|
||||
|