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.

README.md

canvas-datagrid

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

canvas-datagrid

Coverage Status NPM License Published on webcomponents.org

  • 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

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">[
    {"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

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