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 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 version history.
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.
- Any number of rows and columns
- Grid, column, row, and cell styling
- User-resizeable columns, column-dragging, column picking
- Plug-in-able cell formatters and editors
- Smooth scrolling on both axes
- Supports local (client-side) as well as remote (server-side) data hosting
- Events for all UI manipulations including mouse, keyboard, and programmatic UI changes
- Tree-view (drill-downs) presentation for locally grouped, nested, or aggregated data
- Tree-view presentation for remotely aggregated data
- 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
- The current filtering and analytics modules will become separate npm modules/JavaScript files that can be forked and further developed
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.