docs.sheetjs.com/docz/docs/03-demos/04-grid/index.md
SheetJS 92e3c5aa72 mdx cleanup in preparation for v2
- use autolinks (e.g <https://sheetjs.com> -> https://sheetjs.com)
- move <summary> blocks to separate lines
2024-04-08 00:57:39 -04:00

5.5 KiB

title pagination_prev pagination_next
Data Grids and Tables demos/frontend/index demos/net/index

import current from '/version.js'; import CodeBlock from '@theme/CodeBlock';

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.

:::tip pass

SheetJS 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, it is easier to process an array of arrays.

x-spreadsheet

With a familiar UI, x-spreadsheet is an excellent choice for a modern editor.

Click here for a live integration demo.

The exposition has been moved to a separate page.

Canvas Datagrid

After extensive testing, canvas-datagrid stood out as a high-performance grid with a straightforward API.

Click here for a live integration demo.

The exposition has been moved to a separate page.

Tabulator

Tabulator includes deep support through a special Export button. It handles the SheetJS operations internally.

Angular UI Grid

:::warning pass

This UI Grid is for AngularJS, not the modern Angular. New projects should not use AngularJS. This demo is included for legacy applications.

The AngularJS demo covers more general strategies.

:::

Click here for a live integration demo.

Notes (click to show)

The library does not provide any way to modify the import button, so the demo includes a simple directive for a File Input HTML element. It also includes a 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.

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

The exposition has been moved to a separate page.

Glide Data Grid

The exposition has been moved to a separate page.

Material UI Data Grid

The exposition has been moved to a separate page.

vue3-table-lite

The exposition has been moved to a separate page.

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:

function export_html_table(table) {
  const wb = XLSX.utils.table_to_book(table);
  XLSX.writeFile(wb, "HTMLTable.xlsx");
} // yes, it's that easy!

:::info pass

SheetJS CE is focused on data preservation and will extract values from tables.

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

{`\

\n\

SheetJS
\n\ `}

When programmatically constructing the table in the browser, retain a reference:

/* assemble table */
var tbl = document.createElement("TABLE");
tbl.insertRow(0).insertCell(0).innerHTML = "SheetJS";

/* add to document body */
document.body.appendChild(tbl);

/* generate workbook and export */
const wb = XLSX.utils.table_to_book(tbl);
XLSX.writeFile(wb, "HTMLFlicker.xlsx");

/* remove from document body */
document.body.removeChild(tbl);

React

The exposition has been moved to a separate page.

Material UI Table

The exposition has been moved to a separate page.