Skip to main content

Canvas Datagrid

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

Click here for a live standalone integration demo.

Live Demo


Due to CSS conflicts between the data grid and the documentation generator, features like scrolling may not work as expected.

The linked demo uses a simple HTML page.

Live Editor

Integration Details

Obtaining the Library

The canvas-datagrid NodeJS packages include a minified script that can be directly inserted as a script tag. The unpkg CDN also serves this script:

<script src=""></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: []

For large data sets, it's necessary to constrain the size of the grid. = '100%'; = '100%';

Once the workbook is read and the worksheet is selected, assigning the data variable automatically updates the view: = XLSX.utils.sheet_to_json(ws, {header:1});

This demo previews the first worksheet.


canvas-datagrid handles the entire edit cycle. No intervention is necessary.

Saving Data is immediately readable and can be converted back to a worksheet. Some versions return an array-like object without the length, so a little bit of preparation may be needed:

/* converts an array of array-like objects into an array of arrays */
function prep(arr) {
var out = [];
for(var i = 0; i < arr.length; ++i) {
if(!arr[i]) continue;
if(Array.isArray(arr[i])) { out[i] = arr[i]; continue };
var o = new Array();
Object.keys(arr[i]).forEach(function(k) { o[+k] = arr[i][k] });
out[i] = o;
return out;

/* build worksheet from the grid data */
var ws = XLSX.utils.aoa_to_sheet(prep(;

/* build up workbook */
var wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, 'SheetJS');

/* generate download */
XLSX.writeFile(wb, "SheetJS.xlsx");

Additional Features

This demo barely scratches the surface. The underlying grid component includes many additional features that work with SheetJS Pro.