JSPM

canvas-datagrid

Demo

• Support for millions of contiguous rows and columns without paging or loading.
• Native support for touch devices (phones and tablets).
• Extensible styling, filtering, formatting, resizing, selecting, and ordering.
• W3C ES5 web component, rich API of events, methods and properties using the familiar W3C interface.
• Works with Firefox, IE11, Edge, Safari and Chrome.
• Built in and custom styles.
• Per-user styles, settings using localStorage.
• Hierarchal context menu.
• Zero dependencies, very small code base, distributed as a single 80k (20k gziped) file.

Documentation

Tutorials

Style Builder

Download latest version (minified)

Tests

Source Code

Latest Test Coverage

Coveralls

Installation

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.

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

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 class="myGridStyle">[
    {"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"}
]</canvas-datagrid>

More Demos

• Using Webpack3: AMD

• Using React

• Web component example

• Loading data with XHR

• Sparkline example

Building & Testing

To build production version.

npm install

To build debug version

npm run build-dev

To build documentation

npm run build-docs

To run tests

npm test