Canvas Data Grid

Demo

• Support for millions of contiguous rows and columns without paging or loading.
• Support for touch devices (phones and tablets).
• Extensible styling, filtering, formatting, resizing, selecting, and ordering.
• Built in and custom styles.
• 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.
• Hierarchal context menu.

Make your own custom styles

Documentation

Tutorials

Download latest version (minified)

Tests

Source Code

Latest Test Coverage

Coveralls

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 & Testing

npm install

npm run build-dev

npm run build-docs

npm test