xsheetjs/demos/datagrid
SheetJS 9ba09bab5e improved plaintext parsing
- fuzzy number check disregards commas (fixes #709 h/t @mz121star)
- updated to CFB 0.12.1
- parse_dom_table and html_to_sheet raw option
- canvas-datagrid demo
- docs and TS definition update
2017-08-09 18:38:23 -04:00
..
index.html improved plaintext parsing 2017-08-09 18:38:23 -04:00
README.md improved plaintext parsing 2017-08-09 18:38:23 -04:00
xlsx.full.min.js improved plaintext parsing 2017-08-09 18:38:23 -04:00

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 stood out as a very high-performance grid with an incredibly simple API.

Obtaining the Library

The canvas-datagrid npm nodule 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:

<script src="https://unpkg.com/canvas-datagrid/dist/canvas-datagrid.js"></script>

Previewing Data

The HTML document needs a container element:

<div id="gridctr"></div>

Grid initialization is a one-liner:

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:

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:

/* 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.