Home

Hypergrid

Hypergrid is a canvas grid rendering engine built with focus on performance.

Creating Your Grid

Builds of the latest version of Hypergrid are available on the Github CDN here or on NPM as a node module for bundling.

NPM Package

npm install fin-hypergrid

const Hypergrid = require('fin-hypergrid');

const myGrid = new Hypergrid(container, options);

Script Tag

// The script tag exposes the Hypergrid constructor as fin.Hypergrid
const myGrid = new fin.Hypergrid(container, options);

Parameters

container (optional)

Takes a dom element ID as a string (i.e. #myGrid) to mount Hypergrid in. If no parameter is sent in, Hypergrid will mount in a div with id hypergrid.

options (optional)

An object. These are the options used to instantiate the grid, i.e. data.

Data

The data you pass in to the options or via the .setData() method is an array of congruent objects.

const data = [
    { name: 'Company 1', price: 300 },
    { name: 'Company 2', price: 200 },
    { name: 'Company 3', price: 150 },
    { name: 'Company 4', price: 500 },
    { name: 'Company 5', price: 999 }
];

Column properties can then be defined in the grid's behavior.

What Happens

The grid is then rendered with as defined in the default settings here, unless overridden in the instantiation.