xsheetjs/demos/datagrid
SheetJS 5b67ac0806 version bump 0.11.2: proper plaintext parsing
- dollar currencies and percentages properly detected as numbers
- parse potential CDATA segments in XLSX (fixes #775 h/t @awb99)
- IE8 issues with regex
- altjs demos

Issues:
- fixes #673 h/t @huhm
- fixes #748 h/t @sangpuion
- fixes #749 h/t @GreggOD
- fixes #772 h/t @sangpuion @jyyan
2017-08-10 19:46:34 -04:00
..
index.html version bump 0.11.2: proper plaintext parsing 2017-08-10 19:46:34 -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.