JSPM

canvas-datagrid

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.
• W3C ES5 web component.
• 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 using the familiar W3C interface.
• 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, without webpack or as a web component. If used without webpack, canvasDatagrid is declared in the global scope. The container can be any block element. canvasDatagrid generates its own canvas element in Shadow DOM when available.

Using pure JavaScript

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'}
    ]
});

Using web component

    <canvas-datagrid data='[{"a": 0, "b": 1}]'></canvas-datagrid>

Building & Testing

npm install

npm run build-dev

npm run build-docs

npm test