xsheetjs/demos/datagrid

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.