fin-hypergrid CDN

Welcome to the Hypergrid CDN.

This CDN hosts builds, including minified builds, of repos hosted under the fin-hypergrid GitHub organization.

All the fin-hypergrid repos are also published to the npm registry for serious application development using a module bundler (such as Browserify or webpack) to produce a single downloadable JavaScript file. Such applications do not need the build files on this CDN and should not be loading anything from here at run time.

That said, some developers may choose to use a version of fin-hypergrid.min.js, the Hypergrid core build file, and bundle all other modules into a single additional file for download. This approach has the advantage of having the page load the relatively invariant (and large, at 247KB for v3.0.0) core build, which the browser then caches for future reference. This is particularly advantageous if there are multiple apps using the same core file. Download once; use many times. Downsides include limited access to internal core modules (probably a good thing) and the difficulty in maintaining a flat dependency graph when working with more than one bundled build.

Specifically, this CDN hosts build files for:

A list of the build files on the CDN along with sample script tags can be found in the CDN index.

Applications use <script> tags to load these files from the CDN at run time. In this way, individual modules are loaded onto the client synchronously, one file per <script> tag.

In addition to the build files, this site hosts:


All build files are offed in two editions:


  1. Copy and paste <script> tags from the CDN index, as needed, into your application's .html file to have your application load them at run time.
  2. Reference the modules in your in code as illustrated in the next section.

Exposed modules

The core build exposes some of its internal modules, namespaces, and external dependencies
The declarations below all assume:
var require = fin.Hypergrid.require; // (calling context undefined)

Internal modules

The Hypergrid core build exposes a selection of its internal modules with require() syntax:


The following shared namespaces are instances of Registry:

Members are accessed via the registry's get method.

These are all shared registries; they are shared by all grid instances on the page.

The cellEditors, dataModels, and features registries are collections of object constructors. The cellRenderers registry is a collection of cell renderer instances. (Recall however that access to an instance's constructor is available through its constructor property.)

Deprecated namespaces

The following namespaces from version 2.1 are deprecated as of version 3.0.0 and will be removed in a future release. The comments show the deprecated vs. modern usage (where modname is a module name):

External dependencies

In the interest of aiding developers in maintaining a flat dependency graph (_i.e.,_ avoiding loading multiple instances of the same module), the core build also exposes its external dependencies, using the same require()-like syntax as above (see package.json for versions):

All of the above are actually read-only members of the `fin.Hypergrid.modules` namespace. The above `require` syntax is preferred, however, because it makes a possible future transition to bundling your app just a matter of removing the `var require` definition.

Overridable dependencies

In addition, the following writable properties are provided for overriding:

Hypergrid always references these two modules through the above properties.

Referencing modules in code

How your modules reference other modules — and how other modules reference your modules — depends on whether or not the modules in question are wrapped up as Hypergrid Client Modules. (An HCM wrapper is a closure that defines local require, module, and exports variables).

See the Client Modules wiki for more information.

Hypergrid core

The Hypergrid core object is both a constructor and a namespace and always required. It is referenced as follows:

From raw JavaScript:
var Hypergrid = window.fin.Hypergrid;
As CommonJS module (requires bundler or an HCM wrapper):
var Hypergrid = require('fin-hypergrid');

Hypergrid Client Modules

Most modules whose source repositories are hosted under, in addition to being published as npm modules, are also "built" into Hypergrid Client Modules and referenced as follows:

From raw JavaScript:
var myModule = fin.Hypergrid.require('my-module');
From within another such closure:
var myModule = require('my-module');

Other modules

All other modules are referenced using a module-dependent global variable. Unwrapped modules are free to insert themselves into fin.Hypergrid.modules, which would let them be referenced as a Client Module; however they would not themselves be able to reference Hypergrid or Hypergrid Client Modules using require().

CDN index

Hypergrid core


The Hypergrid core bundled build is always required. A version number is required. Include only one of the following scripts in your application:

Latest Hypergrid 3.3 version (recommended!):
As of v3.2.1, also available on the unpkg CDN (via a ./umd folder in the npm module):
The advantage of unpkg is it optionally accepts and applies any valid SEMVER string after an @ sign.
The above SEMVER spec ^3.2 requests the latest 3.2 version, currently 3.3.2.
Latest Hypergrid 2.1 version:
Latest Hypergrid 2.0 version:
Latest Hypergrid 1.3 version:
The unminified versions are a hefty ~2.2 MB (largely due to inclusion of the source map for debugging purposes). Always use a minified version (~0.25 MB) on production.

API Documentation

To see the API documentation for the lastest version, just link to the core/doc folder (a sym-link to core/3.0.0/doc):

To see API documentation for older versions, insert a version number + / before doc:


To access the latest version's default demo, just link to the core/demo folder (a sym-link to core/3.0.0):

To access older demos, substitute a version number for demo:

Other demos

In addition to the default demo, the CDN also hosts additional demos that can be used as sample code (caution: not all of these have been retested with the latest build):

Again, to access older versions of the above demos, simply substitute a version number for demo.

Hypergrid plug-ins

Plug-ins are published as npm modules (CommonJS modules) to the npm registry ( For example, to install the latest version of the fin-hypergrid-grouped-header plug-in: npm install --save fin-hypergrid-grouped-header. The plug-in will now be available to your file bundler when referenced in code with `require('fin-hypergrid-grouped-header')`.

Plug-ins are usually published as Hypergrid client modules as well, for direct inclusion with <script> tags. For example, including one of the following <script> tags in html file will make the file available to your code with `fin.Hypergrid.require('fin-hypergrid-grouped-header'):

Note that like the Hypergrid build files themselves, these plug-in CDNs do not include sym-links to the latest version; a version number is always required.