image36/canvas-datagrid

Canvas based data grid web component. Capable of displaying millions of contiguous hierarchical rows and columns without paging or loading, on a single canvas element.

canvas-datagrid

Demo - City of Chicago government employee list. Thanks to data.gov.

• Support for unlimited rows and columns without paging or loading.
• Drawn in immediate mode, data size does not impact performance.
• Native support for touch devices (phones and tablets).
• Extensible styling, filtering, formatting, resizing, selecting, and ordering.
• Rich API of events, methods and properties using the familiar W3C DOM interface.
• Works with Firefox, IE11, Edge, Safari and Chrome.
• Support for hierarchal drill in style row level inner grids as well grids in cells.
• Support for freezing columns and rows.
• Customizable hierarchal context menu.
• Built in and custom styles.
• W3C Web Component.
• Per-user styles, column sizes, row sizes, view preferences and settings using localStorage.
• Very small file size, no dependencies.

Documentation

Tutorials

Style Builder

Download latest version (minified)

Tests

Source Code

Latest Test Coverage

Coveralls

Installation

With npm -- Use npm's instal feature.

npm install canvas-datagrid

From Source -- 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>

Alternatively, instead of downloading and installing locally, you can link directly to an NPM CDN like unpkg.com.

<script src="https://unpkg.com/canvas-datagrid"></script>

A function will be added to the global scope of the web page called canvasDatagrid as well as module loader definitions.

Getting started

Works with webpack, without webpack or as a web component. No matter how you load it, canvasDatagrid is declared in the global scope.

Canvas-datagrid is a Web Component when in a compatible browser, otherwise it is a <canvas> tag.

Using pure JavaScript

var grid = canvasDatagrid();
document.body.appendChild(grid);
grid.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>

or

var grid = document.createElement('canvas-datagrid');
grid.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"}
];

More Demos

• Using Webpack3: AMD

• Using React

• Web component example

• XHR data paging demo - Jeopardy Questions API. Thanks to jservice for the use of the free paging API. Note: you must "load unsafe scripts" or relevant command to allow HTTPS (github) to make XHR requests to HTTP (Jeopardy Questions API). There is nothing unsafe about this.

• Loading data with XHR

• Sparkline example

Building & Testing

To install development dependencies. Required to build or test.

npm install

To build production and debug versions.

npm run build-all

To build production version.

npm run build-prd

To build debug version.

npm run build-dev

To build debug version anytime a file in ./lib changes.

npm run build-watch

To build documentation.

npm run build-docs

To run tests. Note: Headless tests will mostly fail due to lack of headless canvas pixel detection support. Use VM testing or your browser.

npm test