Canvas Data Grid

Demo

• High performance hierarchal canvas based data grid.
• Support for millions of rows and columns.
• Extensible styling, filtering, formatting, resizing, selecting, and ordering.
• Support for touch devices (phones and tablets).
• Built in and custom styles.
• Hierarchal context menu.
• Per-user styles, settings using localStorage.
• Single canvas element supporting multiple nested tree or cell grids.
• Rich API of events, methods and properties optimized for CRUD, reporting and work flow applications.
• Zero dependencies, very small code base, distributed as a single 80k (20k gziped) file.

Make your own custom styles

Documentation

Tutorials

Download latest version (minified)

Source Code

Installation

<script src="dist/canvas-datagrid.js"></script>

With npm

npm install canvas-datagrid

With bower

bower install canvas-datagrid

Place the single source file ./dist/canvas-datagrid.js in your web page using a script tag that points to the source or use webpack.

If you do not use a webpack a function will be added to the global scope of the web page called canvasDatagrid.

Getting started

Works with webpack or without. If used without webpack, canvasDatagrid is declared in the global scope. The container can be any block element. canvasDatagrid generates its own canvas element.

var grid = canvasDatagrid({
    parentNode: document.getElementById('container'),
    data: [
        {col1: 'row 1 column 1', col2: 'row 1 column 2', col3: 'row 1 column 3'},
        {col1: 'row 2 column 1', col2: 'row 2 column 2', col3: 'row 2 column 3'}
    ]
});

Building

npm install

npm run-script build-dev

npm run-script build-docs