JSPM

  • Created
  • Published
  • Downloads 5198
  • Score
    100M100P100Q129036F
  • License BSD-3-Clause

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.

Package Exports

  • canvas-datagrid
  • canvas-datagrid/dist/canvas-datagrid

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (canvas-datagrid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

canvas-datagrid

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

canvas-datagrid

Coverage Status NPM License Published on webcomponents.org

  • 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

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