dijonkitchen/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 - Entire City of Chichago government employee list. Thanks to data.gov.

• 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.
• Easy to use W3C web component.
• Rich API of events, methods and properties using the familiar DOM interface.
• Works with Firefox, IE11, Edge, Safari and Chrome.
• Built in and custom styles.
• Per-user styles, settings using localStorage.
• Hierarchal context menu.
• 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

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>

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 use it, canvasDatagrid is declared in the global scope.

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

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>

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

• Pivot-form integration example - pivot-form is the companion library to canvas-datagrid. Where canvas-datagrid is a focused on large datasets, pivot-form is focused on a single row of data, providing rich UI abstractions such as dialogs, tabs, split-containers and more to present your schemas without the need to write complex UI interactions.

Building & Testing

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.

npm test