forked from sheetjs/sheetjs
68 lines
1.8 KiB
Markdown
68 lines
1.8 KiB
Markdown
|
# canvas-datagrid
|
||
|
|
|
||
|
|
The `sheet_to_json` utility function generates output arrays suitable for use
|
||
|
|
with other JS libraries such as data grids for previewing data. After extensive
|
||
|
|
testing, [`canvas-datagrid`](https://tonygermaneri.github.io/canvas-datagrid/)
|
||
|
|
stood out as a very high-performance grid with an incredibly simple API.
|
||
|
|
|
||
|
|
## Obtaining the Library
|
||
|
|
|
||
|
|
The [`canvas-datagrid` npm nodule](http://npm.im/canvas-datagrid) includes a
|
||
|
|
minified script `dist/canvas-datagrid.js` that can be directly inserted as a
|
||
|
|
script tag. The unpkg CDN also exposes the latest version:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<script src="https://unpkg.com/canvas-datagrid/dist/canvas-datagrid.js"></script>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Previewing Data
|
||
|
|
|
||
|
|
The HTML document needs a container element:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<div id="gridctr"></div>
|
||
|
|
```
|
||
|
|
|
||
|
|
Grid initialization is a one-liner:
|
||
|
|
|
||
|
|
```js
|
||
|
|
var grid = canvasDatagrid({
|
||
|
|
parentNode: document.getElementById('gridctr'),
|
||
|
|
data: []
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
Once the workbook is read and the worksheet is selected, assigning the data
|
||
|
|
variable automatically updates the view:
|
||
|
|
|
||
|
|
```js
|
||
|
|
grid.data = XLSX.utils.sheet_to_json(ws, {header:1});
|
||
|
|
```
|
||
|
|
|
||
|
|
This demo previews the first worksheet, but it is easy to add buttons and other
|
||
|
|
features to support multiple worksheets.
|
||
|
|
|
||
|
|
## Editing
|
||
|
|
|
||
|
|
The library handles the whole edit cycle. No intervention is necessary.
|
||
|
|
|
||
|
|
## Saving Data
|
||
|
|
|
||
|
|
`grid.data` is immediately readable and can be converted back to a worksheet:
|
||
|
|
|
||
|
|
```js
|
||
|
|
/* build worksheet from the grid data */
|
||
|
|
var ws = XLSX.utils.aoa_to_sheet(grid.data);
|
||
|
|
|
||
|
|
/* build up workbook */
|
||
|
|
var wb = XLSX.utils.book_new();
|
||
|
|
XLSX.utils.book_append_sheet(wb, ws, 'SheetJS');
|
||
|
|
|
||
|
|
/* .. generate download (see documentation for examples) .. */
|
||
|
|
```
|
||
|
|
|
||
|
|
## Additional Features
|
||
|
|
|
||
|
|
This demo barely scratches the surface. The underlying grid component includes
|
||
|
|
many additional features including massive data streaming, sorting and styling.
|