Skip to main content

Using with a bundler or module loader

The package ships three builds and works with every common way of loading JavaScript.

ES modules (webpack, Vite, Rollup, esbuild, Parcel)​

import canvasDatagrid from 'canvas-datagrid';

const grid = canvasDatagrid({
  parentNode: document.getElementById('grid'),
  data: [{ a: 0, b: 1, c: 2 }],
});

package.json points bundlers at dist/canvas-datagrid.module.js through the module and exports fields. Type declarations are included, see Using with TypeScript.

CommonJS​

const canvasDatagrid = require('canvas-datagrid');

AMD (RequireJS)​

The UMD build (dist/canvas-datagrid.js) registers itself with an AMD loader when one is present:

require(['canvas-datagrid'], function (canvasDatagrid) {
  var grid = canvasDatagrid({
    parentNode: document.getElementById('grid'),
  });
  grid.data = [{ a: 0, b: 1, c: 2 }];
});

Script tag, no build step​

<script src="https://unpkg.com/canvas-datagrid"></script>
<script>
  var grid = canvasDatagrid({ parentNode: document.body });
  grid.data = [{ a: 0, b: 1, c: 2 }];
</script>

The script build also defines the <canvas-datagrid> custom element, so the grid can be written directly in HTML; see Getting started.