jtsymon/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.

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

Documentation

Tutorials

Slack Support (message author for invite)

Style Builder

Download latest version (minified)

Tests

Source Code

Latest Test Coverage

Coveralls

Installation

With npm

npm 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>

Alternatively, instead of downloading and installing, 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" data="data can go here too">[
    {"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"}
];

Using Vue

<canvas-datagrid :data.prop="[{"col1": "row 1 column 1"}]"></canvas-datagrid>

More Demos

• Using Vue

• Using Webpack3: AMD

• Using React

• Web component example

• Loading data with XHR

• Sparkline example

• XHR data paging demo Jeopardy Questions API

Note about XHR paging demo: Thanks to jservice for the use of the free paging API. 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.

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