forked from sheetjs/docs.sheetjs.com
		
	ubuntu-aarch64
This commit is contained in:
		
							parent
							
								
									cf739027b7
								
							
						
					
					
						commit
						096b5ddce8
					
				@ -907,6 +907,13 @@ of the React Native documentation before testing the demo.
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
:::caution pass
 | 
			
		||||
 | 
			
		||||
For Android testing, React Native requires Java 11. It will not work with
 | 
			
		||||
current Java releases.
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
:::info pass
 | 
			
		||||
 | 
			
		||||
In React Native, there are a number of ways to display rows of data. This demo
 | 
			
		||||
@ -917,7 +924,7 @@ uses the native `FlatList` component.
 | 
			
		||||
Create a new project by running the following commands in the Terminal:
 | 
			
		||||
 | 
			
		||||
<CodeBlock language="bash">{`\
 | 
			
		||||
npx react-native@0.72.3 init SheetJSSL --version="0.72.3"
 | 
			
		||||
npx react-native@0.72.4 init SheetJSSL --version="0.72.4"
 | 
			
		||||
cd SheetJSSL
 | 
			
		||||
npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 | 
			
		||||
</CodeBlock>
 | 
			
		||||
@ -999,7 +1006,14 @@ i - run on iOS
 | 
			
		||||
a - run on Android
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
Press `a` to run on android.
 | 
			
		||||
Press `a` to run on Android.
 | 
			
		||||
 | 
			
		||||
:::info Device Testing
 | 
			
		||||
 | 
			
		||||
The demo also runs on real Android devices! After enabling USB debugging[^13],
 | 
			
		||||
the Android device can be connected to the computer with a USB cable.
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
  </TabItem>
 | 
			
		||||
  <TabItem value="ios" label="iOS">
 | 
			
		||||
@ -1035,4 +1049,5 @@ When the app is loaded, the data will be displayed in rows.
 | 
			
		||||
[^9]: See [`sheet_to_json` in "Utilities"](/docs/api/utilities/array#array-output)
 | 
			
		||||
[^10]: See [`!merges` in "Sheet Objects"](/docs/csf/sheet#worksheet-object)
 | 
			
		||||
[^11]: See ["Column Names" in "Addresses and Ranges"](/docs/csf/general#column-names)
 | 
			
		||||
[^12]: See ["Array of Objects" in "ReactJS"](/docs/demos/frontend/react#array-of-objects)
 | 
			
		||||
[^12]: See ["Array of Objects" in "ReactJS"](/docs/demos/frontend/react#array-of-objects)
 | 
			
		||||
[^13]: See ["Running on Device"](https://reactnative.dev/docs/running-on-device) in the React Native documentation for more details.
 | 
			
		||||
@ -257,7 +257,7 @@ require(["dojo/request/xhr", "xlsx"], function(xhr, _XLSX) {
 | 
			
		||||
</script>
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
:::note
 | 
			
		||||
:::note pass
 | 
			
		||||
 | 
			
		||||
The `X-Requested-With` header setting resolves some issues related to CORS.
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -26,7 +26,7 @@ user-supplied sheets and exports data to XLSX workbooks:
 | 
			
		||||
 | 
			
		||||
:::note
 | 
			
		||||
 | 
			
		||||
This demo was last tested on 2023 August 17 with Glide Data Grid 5.2.1
 | 
			
		||||
This demo was last tested on 2023 September 08 with Glide Data Grid 5.2.1
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -340,41 +340,58 @@ cd sheetjs-gdg
 | 
			
		||||
npm i
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
Install SheetJS and Glide Data Grid required dependencies:
 | 
			
		||||
2) Install SheetJS and Glide Data Grid required dependencies:
 | 
			
		||||
 | 
			
		||||
<CodeBlock language="bash">{`\
 | 
			
		||||
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz @glideapps/glide-data-grid@5.2.1`}
 | 
			
		||||
</CodeBlock>
 | 
			
		||||
 | 
			
		||||
Start dev server:
 | 
			
		||||
3) Start dev server:
 | 
			
		||||
 | 
			
		||||
```bash
 | 
			
		||||
npm run dev
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
The terminal window will display a URL (typically `http://localhost:5173`).
 | 
			
		||||
Open the URL with a web browser.
 | 
			
		||||
Open the URL with a web browser and confirm that a page loads.
 | 
			
		||||
 | 
			
		||||
2) Download [`App.tsx`](pathname:///gdg/App.tsx) and replace `src/App.tsx`:
 | 
			
		||||
4) Download [`App.tsx`](pathname:///gdg/App.tsx) and replace `src/App.tsx`:
 | 
			
		||||
 | 
			
		||||
```bash
 | 
			
		||||
curl -L -o src/App.tsx https://docs.sheetjs.com/gdg/App.tsx
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
Refresh the browser window and a grid should be displayed:
 | 
			
		||||
**Testing**
 | 
			
		||||
 | 
			
		||||
5) Refresh the browser window. A grid should be displayed:
 | 
			
		||||
 | 
			
		||||

 | 
			
		||||
 | 
			
		||||
3) To test the export functionality, make some changes to the grid data.
 | 
			
		||||
The demo downloads and processes <https://sheetjs.com/pres.numbers>.
 | 
			
		||||
 | 
			
		||||
6) Make some changes to the grid data.
 | 
			
		||||
 | 
			
		||||
:::note pass
 | 
			
		||||
 | 
			
		||||
Some statisticians believe President Grover Cleveland should be counted once.
 | 
			
		||||
That would imply President Clinton should be index 41 and the indices of the
 | 
			
		||||
other presidents should be decremented. By double-clicking on each cell in the
 | 
			
		||||
Index column, a cell editor should appear. Decrement each index:
 | 
			
		||||
other presidents should be decremented.
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
Double-click on each cell in the Index column and decrement each value. The new
 | 
			
		||||
values should be 41, 42, 43, 44, and 45, as shown in the screenshot below:
 | 
			
		||||
 | 
			
		||||

 | 
			
		||||
 | 
			
		||||
Click on the "Export" button to create a file!  Open the file and verify.
 | 
			
		||||
7) Click on the "Export" button to create a XLSX file (`sheetjs-gdg.xlsx`).
 | 
			
		||||
 | 
			
		||||
Open the generated file and verify the contents match the grid.
 | 
			
		||||
 | 
			
		||||
8) Reload the page. The contents will revert back to the original table.
 | 
			
		||||
 | 
			
		||||
9) Click "Choose File" and select the new `sheetjs-gdg.xlsx` file. The table
 | 
			
		||||
should update with the data in the file.
 | 
			
		||||
 | 
			
		||||
[^1]: See ["Array of Objects" in the ReactJS demo](/docs/demos/frontend/react#array-of-objects)
 | 
			
		||||
[^2]: The "Story" section of the ["Getting Started" page in the Glide Data Grid Storybook](https://quicktype.github.io/glide-data-grid/?path=/story/glide-data-grid-docs--getting-started) stores an Array of Objects outside of the component.
 | 
			
		||||
 | 
			
		||||
@ -22,16 +22,17 @@ This demo uses ViteJS and SheetJS to pull data from a spreadsheet and display
 | 
			
		||||
the content in an HTML table. We'll explore how to load SheetJS in a ViteJS
 | 
			
		||||
plugin and compare a few different data loading strategies.
 | 
			
		||||
 | 
			
		||||
The ["Complete Demo"](#complete-demo) section includes a complete website powered
 | 
			
		||||
by an XLSX spreadsheet.
 | 
			
		||||
The ["Complete Demo"](#complete-demo) section creates a complete website powered
 | 
			
		||||
by a XLSX spreadsheet.
 | 
			
		||||
 | 
			
		||||
:::tip pass
 | 
			
		||||
 | 
			
		||||
This demo covers use cases where data is available at build time. The flow is
 | 
			
		||||
This demo covers use cases where data is available at build time. This flow is
 | 
			
		||||
suitable for end of week or end of month (EOM) reports published in HTML tables
 | 
			
		||||
 | 
			
		||||
For processing user-submitted files in the browser, the
 | 
			
		||||
["Bundlers" demo](/docs/demos/frontend/bundler#vite) is more appropriate.
 | 
			
		||||
["Bundlers" demo](/docs/demos/frontend/bundler#vite) shows client-side bundling
 | 
			
		||||
of the SheetJS library.
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -42,8 +43,8 @@ as UTF-8 strings.  This corrupts binary formats like XLSX and XLS, but a custom
 | 
			
		||||
loader can override the default behavior.
 | 
			
		||||
 | 
			
		||||
For simple tables of data, ["Pure Data Plugin"](#pure-data-plugin) is strongly
 | 
			
		||||
recommended.  The heavy work is performed at build time and the generated site
 | 
			
		||||
only includes the raw data.
 | 
			
		||||
recommended. The file processing is performed at build time and the generated
 | 
			
		||||
site only includes the raw data.
 | 
			
		||||
 | 
			
		||||
For more complex parsing or display logic, ["Base64 Plugin"](#base64-plugin) is
 | 
			
		||||
preferable. Since the raw parsing logic is performed in the page, the library
 | 
			
		||||
@ -187,7 +188,7 @@ document.querySelector('#app').innerHTML = `<table>
 | 
			
		||||
 | 
			
		||||
:::note
 | 
			
		||||
 | 
			
		||||
This demo was tested on 2023 July 03 with `vite v4.3.9` and `vue-ts` template.
 | 
			
		||||
This demo was tested on 2023 September 07 with ViteJS version `4.4.9`.
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -272,7 +273,7 @@ Searching for `Bill Clinton` reveals the following:
 | 
			
		||||
Searching for `BESSELJ` should reveal no results.  The SheetJS scripts are not
 | 
			
		||||
included in the final site!
 | 
			
		||||
 | 
			
		||||
:::note
 | 
			
		||||
:::info pass
 | 
			
		||||
 | 
			
		||||
ViteJS also supports "Server-Side Rendering". In SSR, only the HTML table
 | 
			
		||||
would be added to the final page. Details are covered in the ViteJS docs[^8].
 | 
			
		||||
 | 
			
		||||
@ -39,14 +39,14 @@ These instructions were tested on the following platforms:
 | 
			
		||||
 | 
			
		||||
| Platform                      | Test Date  |
 | 
			
		||||
|:------------------------------|:-----------|
 | 
			
		||||
| Linux (Steam Deck Holo 3.4.8) | 2023-07-12 |
 | 
			
		||||
| Linux (Debian 11 AArch64)     | 2023-08-29 |
 | 
			
		||||
| Linux (Steam Deck Holo x64)   | 2023-07-12 |
 | 
			
		||||
| Linux (Ubuntu 18 AArch64)     | 2023-09-07 |
 | 
			
		||||
| MacOS 10.13 (x64)             | 2023-04-04 |
 | 
			
		||||
| MacOS 13.0 (ARM64)            | 2023-04-13 |
 | 
			
		||||
| Windows 10 (x64) + WSL Ubuntu | 2023-07-23 |
 | 
			
		||||
| Windows 11 (x64) + WSL Ubuntu | 2023-08-31 |
 | 
			
		||||
 | 
			
		||||
With some additional dependencies, the unminified build is reproducible and
 | 
			
		||||
With some additional dependencies, the unminified scripts are reproducible and
 | 
			
		||||
tests will pass in Windows XP with NodeJS 5.10.0.
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
@ -330,7 +330,7 @@ git checkout 955543147dac0274d20307057c5a9f3e3e5d5307
 | 
			
		||||
6) Run the full build sequence
 | 
			
		||||
 | 
			
		||||
```bash
 | 
			
		||||
make clean
 | 
			
		||||
make clean; make
 | 
			
		||||
cd modules; make clean; make; cd ..
 | 
			
		||||
make
 | 
			
		||||
make dist
 | 
			
		||||
 | 
			
		||||
@ -14,11 +14,6 @@ const config = {
 | 
			
		||||
  onBrokenMarkdownLinks: 'warn',
 | 
			
		||||
  favicon: 'img/favicon.ico',
 | 
			
		||||
 | 
			
		||||
  // GitHub pages deployment config.
 | 
			
		||||
  // If you aren't using GitHub pages, you don't need these.
 | 
			
		||||
  //organizationName: 'sheetjs', // Usually your GitHub org/user name.
 | 
			
		||||
  //projectName: 'sheetjs', // Usually your repo name.
 | 
			
		||||
 | 
			
		||||
  // Even if you don't use internalization, you can use this field to set useful
 | 
			
		||||
  // metadata like html lang. For example, if your site is Chinese, you may want
 | 
			
		||||
  // to replace "en" with "zh-Hans".
 | 
			
		||||
@ -113,10 +108,6 @@ const config = {
 | 
			
		||||
          {
 | 
			
		||||
            title: 'Community',
 | 
			
		||||
            items: [
 | 
			
		||||
              //{
 | 
			
		||||
              //  label: 'Stack Overflow',
 | 
			
		||||
              //  href: 'https://stackoverflow.com/questions/tagged/sheetjs',
 | 
			
		||||
              //},
 | 
			
		||||
              {
 | 
			
		||||
                label: 'Discord',
 | 
			
		||||
                href: 'https://discord.gg/sheetjs',
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user