diff --git a/docz/docs/03-demos/04-grid/10-tabulator.md b/docz/docs/03-demos/04-grid/10-tabulator.md new file mode 100644 index 0000000..d37bbab --- /dev/null +++ b/docz/docs/03-demos/04-grid/10-tabulator.md @@ -0,0 +1,167 @@ +--- +title: Tabulator +pagination_prev: demos/frontend/index +pagination_next: demos/net/index +--- + +import current from '/version.js'; +import CodeBlock from '@theme/CodeBlock'; + +[Tabulator](https://tabulator.info/) is a powerful data table library designed +for ease of use. + +[SheetJS](https://sheetjs.com) is a JavaScript library for reading and writing +data from spreadsheets. + +Tabulator offers deep integration with SheetJS for importing and exporting data. +This demo covers additional detail including document customization. + +[Click here for a live standalone integration demo.](pathname:///tabulator/) + +:::note Tested Deployments + +This demo was tested in the following deployments: + +| Browser | Version | Date | +|:-------------|:--------|:-----------| +| Chromium 125 | `6.2.1` | 2024-06-13 | + +::: + +## Integration Details + +The [SheetJS Standalone scripts](/docs/getting-started/installation/standalone) +are appropriate for sites that use the Tabulator CDN scripts. + +[The "Frameworks" section](/docs/getting-started/installation/frameworks) covers +installation instructions for projects using a framework. + +:::info pass + +**The Tabulator script must be loaded after the SheetJS scripts!** + +```html + + + + + +``` + +::: + +### Previewing Data + +Tabulator offers a special `setData` method for assigning data after the table +is created. Coupled with the `autoColumns` option, Tabulator will automatically +refresh the table. + +:::info pass + +The library scans the first row object to determine the header labels. If a +column is missing a value in the first object, it will not be loaded! + +::: + +#### Fetching Files + +When files are stored remotely, the recommended approach is to fetch the files, +parse with the SheetJS `read` method, generate arrays of objects from the target +sheet using `sheet_to_json`, and load data with the Tabulator `setData` method. +The following snippet fetches a sample file and loads the first sheet: + +```html title="Fetching a spreadsheet and Displaying the first worksheet" + +
+ + +``` + +#### Local Files + +Tabulator provides a special `import` method to show a dialog and load data. +Since the importer requires the raw binary data, the method must be called with +the third argument set to `"buffer"`: + +```html title="Parsing a local spreadsheet and Displaying the first worksheet" + + +
+ + +``` + +### Saving Data + +Tabulator provides a special `download` method to initiate the export: + +```html title="Exporting data from Tabulator to XLSX" + + +
+ + +``` + +[The official documentation](https://tabulator.info/docs/6.2/download#xlsx) +covers supported options. + +#### Post-processing + +The `documentProcessing` event handler is called after Tabulator generates a +SheetJS workbook object. This allows for adjustments before creating the final +workbook file. The following example adds a second sheet that includes the date: + +```js title="Exporting data and metadata" +tbl.download("xlsx", "SheetJSTabulator.xlsx", { + documentProcessing: function(wb) { + + /* create a new worksheet */ + var ws = XLSX.utils.aoa_to_sheet([ + ["SheetJS + Tabulator Demo"], + ["Export Date:", new Date()] + ]); + + /* add to workbook */ + XLSX.utils.book_append_sheet(wb, ws, "Metadata"); + + return wb; + } +}); +``` diff --git a/docz/docs/03-demos/04-grid/12-vtl.md b/docz/docs/03-demos/04-grid/12-vtl.md index 6ff4b1b..2936a05 100644 --- a/docz/docs/03-demos/04-grid/12-vtl.md +++ b/docz/docs/03-demos/04-grid/12-vtl.md @@ -7,23 +7,45 @@ pagination_next: demos/net/index import current from '/version.js'; import CodeBlock from '@theme/CodeBlock'; -:::note Tested Deployments +[Vue 3 Table Lite](https://vue3-lite-table.vercel.app/) is a data table library +designed for the VueJS web framework. -This demo was tested against `vue3-table-lite 1.3.9`, VueJS `3.3.10` and ViteJS -`5.0.5` on 2023 December 04. +[SheetJS](https://sheetjs.com) is a JavaScript library for reading and writing +data from spreadsheets. -::: +This demo uses Vue 3 Table Lite and SheetJS to pull data from a spreadsheet and +display the content in a data table. 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: ![vue3-table-lite screenshot](pathname:///vtl/vtl1.png) +:::note Tested Deployments + +This demo was tested in the following deployments: + +| Browser | Version | Date | +|:-------------|:--------|:-----------| +| Chromium 125 | `1.4.0` | 2024-06-13 | + +::: + ## Integration Details +[The "Frameworks" section](/docs/getting-started/installation/frameworks) covers +installation in ViteJS projects using Vue 3 Table Lite. + +Using the `npm` tool, this command installs SheetJS and Vue 3 Table Lite: + +{`\ +npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz vue3-table-lite@1.4.0`} + + #### Rows and Columns Bindings -`vue3-table-lite` presents two attribute bindings: an array of column metadata +Vue 3 Table Lite presents two attribute bindings: an array of column metadata (`columns`) and an array of objects representing the displayed data (`rows`). Typically both are `ref` objects: @@ -114,7 +136,7 @@ cd sheetjs-vtl 2) Install dependencies: {`\ -npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz vue3-table-lite@1.3.9`} +npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz vue3-table-lite@1.4.0`} 3) Download [`src/App.vue`](pathname:///vtl/App.vue) and replace the contents: diff --git a/docz/docs/03-demos/04-grid/index.md b/docz/docs/03-demos/04-grid/index.md index 08ee8ed..c5fab55 100644 --- a/docz/docs/03-demos/04-grid/index.md +++ b/docz/docs/03-demos/04-grid/index.md @@ -30,8 +30,7 @@ The `sheet_to_json` utility function generates arrays of objects, which is suitable for a number of libraries. When more advanced shapes are needed, it is easier to process an array of arrays. - -### x-spreadsheet +#### x-spreadsheet With a familiar UI, `x-spreadsheet` is an excellent choice for a modern editor. @@ -39,7 +38,7 @@ With a familiar UI, `x-spreadsheet` is an excellent choice for a modern editor. **[The exposition has been moved to a separate page.](/docs/demos/grid/xs)** -### Canvas Datagrid +#### Canvas Datagrid After extensive testing, `canvas-datagrid` stood out as a high-performance grid with a straightforward API. @@ -48,13 +47,14 @@ with a straightforward API. **[The exposition has been moved to a separate page.](/docs/demos/grid/cdg)** -### Tabulator +#### Tabulator [Tabulator](https://tabulator.info/docs/5.4/download#xlsx) includes deep support through a special Export button. It handles the SheetJS operations internally. +**[The exposition has been moved to a separate page.](/docs/demos/grid/tabulator)** -### Angular UI Grid +#### Angular UI Grid :::danger pass @@ -134,7 +134,7 @@ TABLE elements and when writing to XLSX and other spreadsheet formats. ::: -### Fixed Tables +#### Fixed Tables When the page has a raw HTML table, the easiest solution is to attach an `id`: @@ -171,10 +171,10 @@ XLSX.writeFile(wb, "HTMLFlicker.xlsx"); document.body.removeChild(tbl); ``` -### React +#### React **[The exposition has been moved to a separate page.](/docs/demos/frontend/react#html)** -### Material UI Table +#### Material UI Table **[The exposition has been moved to a separate page.](/docs/demos/grid/mui#material-ui-table)** diff --git a/docz/docs/03-demos/32-extensions/01-extendscript.md b/docz/docs/03-demos/32-extensions/01-extendscript.md index b80c4b8..5b6f40d 100644 --- a/docz/docs/03-demos/32-extensions/01-extendscript.md +++ b/docz/docs/03-demos/32-extensions/01-extendscript.md @@ -33,7 +33,7 @@ versions of Photoshop and InDesign: Suite. App automation uses ExtendScript, but integration logic uses modern JS. - ["Unified Extensibility Platform" (UXP)](#uxp): This platform supports modern - JavaScript but has limited support (Photoshop 2021+ and InDesign 2022+) + JavaScript but is only supported in recent releases of Photoshop and InDesign. :::note Tested Deployments @@ -241,7 +241,7 @@ manifest must include the following flags to enable `cep.fs`: With newer versions of Creative Cloud apps, a special player debug mode must be enabled to use unsigned extensions. The command depends on the CEP version. -InDesign and PhotoShop 2024 use CEP 11. In the examples, the `11` should be +InDesign and Photoshop 2024 use CEP 11. In the examples, the `11` should be replaced with the appropriate CEP version number. On Windows, within the registry key `HKEY_CURRENT_USER\SOFTWARE\Adobe\CSXS.11`, diff --git a/docz/static/tabulator/index.html b/docz/static/tabulator/index.html new file mode 100644 index 0000000..432f685 --- /dev/null +++ b/docz/static/tabulator/index.html @@ -0,0 +1,112 @@ + + + + + + + +SheetJS + Tabulator Live Demo + + + + + +
+SheetJS + Tabulator Demo
+
+
+

+
+
+ + + + + + + + diff --git a/docz/static/vtl/vtl1.png b/docz/static/vtl/vtl1.png index b53ae4d..60913ea 100644 Binary files a/docz/static/vtl/vtl1.png and b/docz/static/vtl/vtl1.png differ