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.
- 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.
Download latest version (minified)
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
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.
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