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: + ++SheetJS + Tabulator Demo + ++ + +