docs.sheetjs.com/docz/docs/03-demos/02-grid/index.md

180 lines
5.4 KiB
Markdown
Raw Normal View History

2022-08-01 05:34:23 +00:00
---
2022-08-26 19:21:53 +00:00
title: Data Grids and Tables
2023-02-28 11:40:44 +00:00
pagination_prev: demos/frontend/index
pagination_next: demos/net/index
2022-08-01 05:34:23 +00:00
---
2023-04-27 09:12:19 +00:00
import current from '/version.js';
2023-05-03 03:40:40 +00:00
import CodeBlock from '@theme/CodeBlock';
2023-04-27 09:12:19 +00:00
2022-08-01 05:34:23 +00:00
Various JavaScript UI components provide a more interactive editing experience.
Most are able to interchange with arrays of arrays or arrays of data objects.
This demo focuses on a few open source data grids.
:::note
[SheetJS Pro](https://sheetjs.com/pro) offers additional features like styling
and images. The UI tools typically support many of these advanced features.
To eliminate any confusion, the live examples linked from this page demonstrate
SheetJS Community Edition data interchange.
:::
## Managed Lifecycle
Many UI components tend to manage the entire lifecycle, providing methods to
import and export data.
The `sheet_to_json` utility function generates arrays of objects, which is
suitable for a number of libraries. When more advanced shapes are needed,
2022-08-25 08:22:28 +00:00
it is easier to process an array of arrays.
2022-08-01 05:34:23 +00:00
2022-08-18 08:41:34 +00:00
### x-spreadsheet
2023-02-28 11:40:44 +00:00
With a familiar UI, `x-spreadsheet` is an excellent choice for a modern editor.
2022-08-18 08:41:34 +00:00
[Click here for a live integration demo.](pathname:///xspreadsheet/)
2023-03-12 06:25:57 +00:00
**[The exposition has been moved to a separate page.](/docs/demos/grid/xs)**
2022-08-18 08:41:34 +00:00
2023-03-12 06:25:57 +00:00
### Canvas Datagrid
2022-08-01 05:34:23 +00:00
2023-03-12 06:25:57 +00:00
After extensive testing, `canvas-datagrid` stood out as a high-performance grid
with a straightforward API.
2022-08-01 05:34:23 +00:00
[Click here for a live integration demo.](pathname:///cdg/index.html)
2023-03-12 06:25:57 +00:00
**[The exposition has been moved to a separate page.](/docs/demos/grid/cdg)**
2022-08-24 23:48:22 +00:00
### Tabulator
2022-10-19 21:12:12 +00:00
[Tabulator](https://tabulator.info/docs/5.4/download#xlsx) includes deep support
2022-08-25 08:22:28 +00:00
through a special Export button. It handles the SheetJS operations internally.
2022-08-24 23:48:22 +00:00
2022-08-01 05:34:23 +00:00
### Angular UI Grid
:::warning
This UI Grid is for AngularJS, not the modern Angular. New projects should not
use AngularJS. This demo is included for legacy applications.
2023-04-09 00:20:50 +00:00
The [AngularJS demo](/docs/demos/frontend/angularjs) covers more general strategies.
2022-08-01 05:34:23 +00:00
:::
[Click here for a live integration demo.](pathname:///angularjs/ui-grid.html)
<details><summary><b>Notes</b> (click to show)</summary>
The library does not provide any way to modify the import button, so the demo
2022-08-25 08:22:28 +00:00
includes a simple directive for a File Input HTML element. It also includes a
2022-08-01 05:34:23 +00:00
sample service for export which adds an item to the export menu.
The demo `SheetJSImportDirective` follows the prescription from the README for
File input controls using `readAsArrayBuffer`, converting to a suitable
representation and updating the scope.
`SheetJSExportService` exposes export functions for `XLSB` and `XLSX`. Other
file formats can be exported by changing the `bookType` variable. It grabs
values from the grid, builds an array of arrays, generates a workbook and forces
a download. By setting the `filename` and `sheetname` options in the `ui-grid`
options, the output can be controlled.
</details>
2022-08-17 07:10:01 +00:00
## Framework Lifecycle
For modern frameworks like React, data grids tend to follow the framework state
and idioms. The same `sheet_to_json` and `json_to_sheet` / `aoa_to_sheet`
methods are used, but they pull from a shared state object that can be mutated
with other buttons and components on the page.
### React Data Grid
2023-04-19 08:50:07 +00:00
**[The exposition has been moved to a separate page.](/docs/demos/grid/rdg)**
2022-08-17 07:10:01 +00:00
2023-02-07 09:24:49 +00:00
### Glide Data Grid
2023-04-07 08:30:20 +00:00
**[The exposition has been moved to a separate page.](/docs/demos/grid/gdg)**
2022-08-17 07:10:01 +00:00
2022-09-03 10:02:45 +00:00
### Material UI Data Grid
2023-05-11 06:17:10 +00:00
**[The exposition has been moved to a separate page.](/docs/demos/grid/mui#material-ui-data-grid)**
2022-08-18 08:41:34 +00:00
2022-08-25 08:22:28 +00:00
<!-- spellchecker-disable -->
2022-08-18 08:41:34 +00:00
### vue3-table-lite
2022-08-25 08:22:28 +00:00
<!-- spellchecker-enable -->
2023-04-24 08:50:42 +00:00
**[The exposition has been moved to a separate page.](/docs/demos/grid/vtl)**
2022-08-18 08:41:34 +00:00
2022-09-03 10:02:45 +00:00
## Standard HTML Tables
Many UI components present styled HTML tables. Data can be extracted from the
tables given a reference to the underlying TABLE element:
```js
function export_html_table(table) {
const wb = XLSX.utils.table_to_book(table);
XLSX.writeFile(wb, "HTMLTable.xlsx");
} // yes, it's that easy!
```
:::info
SheetJS CE is focused on data preservation and will extract values from tables.
[SheetJS Pro](https://sheetjs.com/pro) offers styling support when reading from
TABLE elements and when writing to XLSX and other spreadsheet formats.
:::
### Fixed Tables
When the page has a raw HTML table, the easiest solution is to attach an `id`:
2023-05-03 03:40:40 +00:00
<CodeBlock language="html">{`\
<script src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/shim.min.js"></script>
<script src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js"></script>
\n\
<!-- table with id \`xport\` -->
2022-09-03 10:02:45 +00:00
<table id="xport"><tr><td>SheetJS</td></tr></table>
2023-05-03 03:40:40 +00:00
\n\
2022-09-03 10:02:45 +00:00
<script>
/* as long as this script appears after the table, it will be visible */
var tbl = document.getElementById("xport");
const wb = XLSX.utils.table_to_book(tbl);
XLSX.writeFile(wb, "HTMLTable.xlsx");
2023-05-03 03:40:40 +00:00
</script>`}
</CodeBlock>
2022-09-03 10:02:45 +00:00
When programmatically constructing the table in the browser, retain a reference:
```js
2023-05-03 03:40:40 +00:00
/* assemble table */
2022-09-03 10:02:45 +00:00
var tbl = document.createElement("TABLE");
tbl.insertRow(0).insertCell(0).innerHTML = "SheetJS";
2023-05-03 03:40:40 +00:00
/* add to document body */
2022-09-03 10:02:45 +00:00
document.body.appendChild(tbl);
2023-05-03 03:40:40 +00:00
/* generate workbook and export */
2022-09-03 10:02:45 +00:00
const wb = XLSX.utils.table_to_book(tbl);
XLSX.writeFile(wb, "HTMLFlicker.xlsx");
2023-05-03 03:40:40 +00:00
/* remove from document body */
2022-09-03 10:02:45 +00:00
document.body.removeChild(tbl);
```
### React
2023-05-11 06:17:10 +00:00
**[The exposition has been moved to a separate page.](/docs/demos/frontend/react#html)**
2022-09-03 10:02:45 +00:00
### Material UI Table
2023-05-11 06:17:10 +00:00
**[The exposition has been moved to a separate page.](/docs/demos/grid/mui#material-ui-table)**