fin-hypergrid is an ultra-fast HTML5 grid presentation layer, achieving its speed by rendering (in a canvas tag) only the currently visible portion of your (virtual) grid, thus avoiding the latency and life-cycle issues of building, walking, and maintaining a complex DOM structure.
The current version 1.0 replaces last year's prototype version, which was built around Polymer. It is now completely "de-polymerized" and is being made available as:
- An npm module for use with browserify.
- A single JavaScript file fin-hypergrid.js you can reference in a
<script>tag.
For a complete list of changes, see the release notes.
This tutorial is a tool that shows developers how to use Hypergrid and implement its features.
Hyperblotter is a demo app that shows the capabilities of both OpenFin and Hypergrid.
Check out the Table view on Hyperblotter on a Windows machine via this installer.
- We are currently working on expanding the API to enable application developers to easily provide their own functionality.
- Hypergrid will have no opinion on how the underlying data should be pivoted, but will remain capable of presenting pivoted data.
- For local data transformations, the current sorting, filtering, etc., modules will be unbundled from the Hypergrid build and published as external modules, along with full API docs so you can roll your own.
- Remote data transformations will be supported with all the eventing necessary for triggering such transformations on a remote server.
- Drill-downs, currently implemented for local tree view, group view, and aggregated data view, will be supported for remote data as well.
This is a basic example that embeds fin-hypergrid:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<div id="fin-grid"></div>
<script src="https://openfin.github.io/fin-hypergrid/build/fin-hypergrid.js"></script>
<script>
var data = [
{ symbol: 'APPL', name: 'Apple Inc.', prevclose: 93.13 },
{ symbol: 'MSFT', name: 'Microsoft Corporation', prevclose: 51.91 },
{ symbol: 'TSLA', name: 'Tesla Motors Inc.', prevclose: 196.40 },
{ symbol: 'IBM', name: 'International Business Machines Corp', prevclose: 155.35 }
];
var grid = new fin.Hypergrid('#fin-grid', { data: data });
grid.addProperties({
showRowNumbers: false,
showFilterRow: false
});
</script>
</body>
</html>Will look like:
Essential documentation and examples will be added to this page in the near future.
We are also maintaining online API documentation for all public objects and modules. This documentation is necessarily a on-going work-in-progress.
(Cell editor information can be found here.)
(Cell Rendering information can be found here.)
Hypergrid global configurations can be found here. Use it for modifying various hypergrid features and property defaults.
Developers interested in contributing to this project should submit pull requests against the develop branch.
We have several beginner help wanted tickets open for community involvement.