fin-hypergrid / core

A canvas-based super high performant grid renderer API

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. Please be sure to checkout our design overview

Below is an example custom application built on top of the Hypergrid API tooling. It also highlights a DOM-based custom external editor triggered via hypergrid events as well as interaction with Hypergrid’s column ordering API.

Table of Contents

• Current Release
• Distribution
• Demos
• Features
• Testing
• Documentation
• Roadmap
• Contributing

Current Release

v3.3.2 25 November 2019

Distribution

npm module (recommended)

Published as a CommonJS module to npm. Specify a SEMVER of "fin-hypergrid": "3.3.2" (or "^3.3.2") in your package.json file, issue the npm install command, and let your bundler (wepback, Browserify) create a single file containing both Hypergrid and your application.

Build files

For small and informal examples and proofs-of-concept, load a pre-bundled build file (fin-hypergrid.js or fin-hypergrid.min.js) from the GitHub CDN. See the CDN index for links.

Your application can load one of these pre-bundled build files (in a <script> tag), which creates the global namespace window.fin (as needed) and populates it with window.fin.Hypergrid.

As of v3.2.1, the same build files are also available in a umd folder on npm for distribution via the unpkg CDN which processes SEMVER semantics when provided. For example, <script src="https://unpkg.com/fin-hypergrid@^3.2/umd/fin-hypergrid.min.js"></script> loads v3.3.2 which is the greatest (most recent) version number matching the SEMVER pattern ^3.2 (aka 3..).

Demos

The fin-hypergrid/build repo generates the build files. It also hosts the demo source files that test and show off various Hypergrid features. Some of these use the npm module while others use the bundled build file. Working versions of all demos are published to the CDN (list of links).

Testbench

The default demo is the Hypergrid dev testbench (source).

(This app bundles the npm module plus all of its own modules together into a single file (testbench.js). For illustrative purposes, this alternate version loads the pre-bundled build file fin-hypergrid.js plus specially IIFE-wrapped versions of each its own modules discretely.)

Simple example

See example.html for a very simple example (repo, demo):

Who else is using Hypergrid?

Perspective

The Perspective open source project uses Hypergrid v3 (demo links in the README) and does a lot more than Hypergrid alone, such as table pivots and charting.

AdaptableBlotter.JS

Openfin’s AdaptableBlotter.JS (installer) is a demo app that shows the capabilities of both Openfin and Hypergrid.

Features

Testing

Please use github issues to report problems

We invite everyone to test the alpha branch for changes going into the next release

Find more information on our testing page

Developer Documentation

Primarily our tutorials will be on the wiki.

We also maintain versioned online API documentation for all public objects and modules. This documentation is necessarily an 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.

Roadmap

For our current queue of upcoming work you can find it here

Contributors

Developers interested in contributing to this project should review our contributing guide before making pull requests.

core's Issues

link on hover show cursor change in the wrong column

Shift+click after scroll

When doing multiple selection and using the scroll bar the shift + click combo does not work as expected.

steps to reproduce:

1. select an item
2. use the scroll bar
3. shift + click second item

Should select all items in between, it actually only selects the last item.

themes don't work standalone

create simple hypergrid demo and load a css theme, you cannot see the fixed area text as it has the same color as the background color

Polymer 1.0 support

Is support planned for Polymer 1.0?

Does The Big Refactor Include These Features?

I need the following features for my application and I would like to know if the big-refactor branch contains them currently or if it is planned for future.

• Filtering
• Sorting
• Column grouping
• Column auto-sizing /re-sizing
• Fixed/Frozen columns
• Tree/Aggregated view
• Coloured headers
• Coloured cells / text formatters
• Export to csv

I can see some of them in http://openfin.github.io/fin-hypergrid/components/fin-hypergrid/demo.html?theme=candy

I can't see

• Filtering
• Column auto-sizing /re-sizing (README mentions this though)
• Fixed/Frozen columns (README mentions this though)
• Tree/Aggregated view
• Export to csv (needs to work without a plugin installed in Excel)

Thanks for all your work on this excellent component!

setTimeout in Demo

Why are there two times setTimeout defined in bclys index.html ? Just for demonstration or is this some kind of workaround?
https://github.com/openfin/fin-hypergrid/blob/master/examples/bclys/index.html#L302

getting started instructions doesnt result in a working grid

Hi,

Followed the instruction in getting started, ran a grunt serve, browser appeared, contents in top splitter pane works, but nothing in the bottom. No errors in npm or bower installs.

Chrome reports two errors:

Uncaught TypeError: inMemoryGrid.getBehavior is not a function(anonymous function) @ demo.html:366(anonymous function) @ polymer.js:11702queue.flushReadyCallbacks @ polymer.js:11508
demo.html:520 Uncaught TypeError: jsonGrid.getBehavior is not a function(anonymous function) @ demo.html:520(anonymous function) @ polymer.js:11702queue.flushReadyCallbacks @ polymer.js:11508

The failing lines are coming from index.html, any ideas?

thanks.

Official discussion area

I can continue creating issues to ask questions, but just thought I'd suggest a gitter.im, slack and/or irc channel for anyone who wants to have conversations and get help etc.

feature: autowrap content to a fixed cell(column) width and expand vertically

Essentially what I mean is auto row height similar to what kendo and other grids offer. I know the grid currently supports the user adjusting row heights but this is a whole other beast that gets even more complicated when "paging" through chucks of remote data sets from a server.

I'd love to brainstorm and hash out from a high-level how this would actually work.

JSONBehavior insert data should behave better

the sorting mechanism conflicts with adding objects to the original data array

Green plumb integration

Integrate with Pivotal Green plumb,
http://www.pivotal.io/big-data/pivotal-greenplum-database

Adding data doesn't update the scrollbar position

Using the event fin-scroll-y, I have created a infinite scrolling list.

My problem is that when I scroll to the end, the scrollbar doesn't move after the data is loaded.
Taking a looks at your README, it seems the scrollbar is not tied to the rows.

Is there an easy way to fix this problem?

How to define new cell editor in React?

I'm using Hypergrid inside a React component, and setting its initial properties as in this componentDidMount function:

componentDidMount() {
    document.addEventListener('polymer-ready', () => {
    myHypergrid.getBehavior().initializeCellEditor('my-number-cell-editor');
    myHypergrid.getBehavior().getCellEditorAt = function(x, y) {
        var cellEditor = this.grid.cellEditors['numberfield'];
        return cellEditor;
    };
}

following the "add new cell editor" instructions on the main page. However, I cannot import the cell editor HTML file in Index.html, as that requires importing Polymer, and doing so produces "Polymer is not a defined function" errors on render. What is the correct way to import cell editor HTML into React?

Column/row selection

clicking on the column header or column, you can select the entire row/column, in excel fashion.

Good click/bad click

So if one has the hypergrid open and doesn't scroll the parent page then click events are cool:

However if one was to scroll the parent then click events go bad:

I'm working on a fix now to correct the offset of the canvas element and normalise the click x,y.

Scroll bars in demo's are hard to find and use

Hi.
First off this is one of the most amazing demo's I've seen in a while! It really pushes the boundaries of what thought possible.
One issue is it seems the custom scroll bars are at the edge of the canvas as opposed to the width of the content as can be seen in your json-standalone demo. Can there be a way that you calculate how much width you've actually used and move the scroll bar to that edge as opposed to the page edge?
Also one other suggestion- the scroll bars are a little too subtle in all the demos. I realize it's a feature that they only show on hover and are semi-transparent and are on top of the content, but to someone used to ordinary browser scroll bars I struggled even to realize that there was a way to scroll at all. And even after finding the scroll bars they were so transparent I had trouble seeing how much progress I had made. Is there any way to make the scroll bars more pronounced in the demos?
Thanks and huge kudos.

editors events are broken

you can no longer open drop down editors are use some of the cell editor widgets, it looks like an eventing issue

expanded documentation

Hi. I'm very excited by the demo of your product and looking to start working with hypergrid. I have a few questions regarding the use of it. I'm not sure this is the best place for these questions, so if there's a better venue- please suggest.

Would love to see more explicit documentation on adding hypergrid to an existing app. I have an angular app I want to add hypergrid to it.

I tried following this remark from your repo page:

The only js file that is necessary to deploy the hypergrid is fin-hypergrid.min.js which is a vulcanzed conglomeration of all code and dependencies required by fin-hypergrid. An example of this is found here.

But the linked example page doesn't actually use fin-hypergrid.min.js at all. Please clarify.

Also, I'm interested in instructions regarding integration of your Polymer component with Angular and documentation on how to generally set and manipulate the grid's data. Can I use an array of objects in controller scope as my hypergrid data source?

Your API has a setValue function for a given cell but I need to add or delete rows from the already displayed data based on an outside event. Is that functionality possible? If I update the JS data in that fashion (adding/deleting/updating rows) will the UI automatically follow suit or what steps need to be taken?

Look forward to learning more on this very promising component. Thanks.

How to render selection border?

I'm currently rendering borders around a selection by overriding the cellRenderer, and calling gc.lineTo() on manually computed cell border edges. This results in http://puu.sh/kXyQr/43e03b8d57.png. However, it's quite expensive to compute the rendered edges on every cell render, and it seems like something far easier like directly painting the selection rectangle on the canvas is doable. Moreover, gridlines get painted over the selection rectangle in the screenshot above.

Does there exist an exposed API to do this, or else is there some way to paint a border around all active selections on the canvas?

Adding event's not working

when I call "addFinListener" on my grid, I get the following:

TypeError: jsonModel.addFinListener is not a function
at tradeBlotterWidget.js:132
at processQueue (angular.js:14454)
at angular.js:14470
at Scope.$get.Scope.$eval (angular.js:15719)
at Scope.$get.Scope.$digest (angular.js:15530)
at Scope.$get.Scope.$apply (angular.js:15824)
at done (angular.js:10263)
at completeRequest (angular.js:10435)
at XMLHttpRequest.requestLoaded (angular.js:10376)

Just wondering if this functionality has maybe been renamed or changed?

code:

var jsonModel = jsonGrid.getBehavior();
jsonModel.addFinListener('fin-click', function(event) {
console.log(event);
});

Feature: default row height

It would be great if I could set a default row height for all non-header rows (and a separate height for header rows).

Proper versioning for dependencies?

So at the moment there's a problem with Polymer/core-collapse (googlearchive/core-collapse#19) that's causing an issue with installing fin-hypergrid#master branch. Is it possible to lock down the versions of the dependencies so we can have rainbows and unicorns again please?

What function does rendering invoke to get the height a row should be rendered as?

I've never really gotten into game style development (render loop, etc) so I'm having a hard time tracking down and debugging to discover functionality.

When I adjust the height of a row to make it bigger (using the default behavior) what function is invoked that gets the height that the row should be rendered as?

How Do I Build Vulcanised Component?

I want to try out the big-refactor branch that is a work in progress as I am very interested in grouping.
What are the build steps to generated the vulcanised component?

Sorting problem

All data disappears after you go back to the non sort state,
asc -> desc -> no sort (data gone)

while if you sort by another column before you go back to no sort on the same column, it is ok.

Deprecated Usage for Shadow Dom related API / CSS

I visited http://openfin.github.io/fin-hypergrid/components/fin-hypergrid/demo.html today and the latest Chrome (ver. 45) issues the following warnings:
/deep/ combinator is deprecated. See https://www.chromestatus.com/features/6750456638341120 for more details.
Calling Element.createShadowRoot() for an element which already hosts a shadow root is deprecated. See https://www.chromestatus.com/features/4668884095336448 for more details.
::shadow pseudo-element is deprecated. See https://www.chromestatus.com/features/6750456638341120 for more details.

I understand these are not hypergrid issue but rather polymer's; there are different versions of the way forward discussed in the issue list that it will support Polymer 1.0 or it will detach from Polymer, both of which I hope could solve the issue, but may I know how big the change will be so I could estimate the difficulty to migrate to the new framework?

Rerendering

So unless I'm being really dumb (which there certainly is a possibility of this) I'm having issues re-rendering the table. I've created a little example: http://ahmednuaman.github.io/hypergrid-rerender-test/

From your demos it appears that you're just hiding and showing each "tab", whereas with most modern JS frameworks they add and remove HTML partials from the main views. The demo I've created essentially does that. Loads a HTML partial containing the table, gives it data, then if you hit the load button again it all starts off cool but no data is displayed.

I've spent some time looking into this and I can see the methods hitting the table, the table flushing the buffer canvas cache and so on, but nothing is rendered. What's also interesting is that for each time the table is re-rendered it adds two new buffer <canvas> elements, I'm thinking that these can probably be given an id so they can be reused somehow, maybe by providing it with a name?

More specific CSS?

It'll be handy to see what CSS is actually required by hypergrid. The problem with importing one of the themes is that it overrides a lot of our CSS.

Page Up/Down functionality

The Grid needs to scroll exactly one page on screen with the page up/page down key presses.

value 0 not getting painted when passed through config.value

It must be stringified. Maybe a null check instead of if(...).

link clicking happens in headers and background area

Bower Releases

Hey are you able to tag or release your fin-hypergrid version for better and faster bower support

because currently there's only one version available 0.0.0 but in your bower.json you have 0.2.12 defined it would be nice to see this released via github for better bower integration using semver :)

Adding

Hi, how can I append data to the grid, without having to reload the whole data set?

Cross browser/mobile eventing

example trackpad, scroll, touch events.

current implementation: https://github.com/stevewirts/fin-canvas

Desired result:
Device and browser agnostic scrolling, navigation and input events.

Row reordering

Row reordering as a feature.

Refactor column reordering code, see column resizing code.

Rectangles larger than viewing window are rendered incorrectly

I'm using addExtraRenderer to paint a rectangle on the grid. When drawing a rectangles larger than the viewing window (visible columns x visible rows), it gets drawn in the wrong place:

http://puu.sh/l6VcH/932ee6ee6a.png

Inline editing only works once if you are not using Chrome

Trying out your example site on OSX 10.10.2, and both Safari 8.0.4 and Firefox 37 (and 38b5) show the edit control once when double-clicking on a cell. The second attempt provides a silent failure. Chrome works fine.

Firefox also has a couple more issues:

• The column headers are black on black.
• No cell borders
• Cells are white instead of grey

Proportional scrollbars

Scroll bar size should be proportional.

Feature: fully disable scrolling

I would like to be able to disable scrolling altogether. There is a use case we have where we will have a partially visible row at the bottom:

We don't want this grid to be scrollable at all (we handle all scrolling with the underlying data model).

Negative rows appear when pressing down arrow after scrolling

To repro:

1. Go to the demo page: http://openfin.github.io/fin-hypergrid/components/fin-hypergrid/demo.html
2. Grab the right scroll bar's thumb and drag it down.
3. Press the down arrow key.

Behaviour Options standarization

q behaviour and json behaviour need to expose a similar API with a small delta on what makes sense.

htmlint task fails

I have a basic clone of the repo. Ran npm install and bower install then ran grunt serve. However, I'm getting a failure when running the htmllint task. I get a simple "Fatal error: Unexpected token E" and the serve command exits.

For now I just removed the htmllint task from the grunt file. Is anyone else getting this?

Column Picker Not Working

When i Open the column picker, and select one of the columns on the right, all of the columns disappear, and this error is thrown in the console:

Exception caught during observer callback: TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.
at TypeError (native)
at Object.TemplateIterator.extractInstanceAt (http://localhost/WebSpikeClient/vendor/openfin/fin-hypergrid.min.html:20:21214)
at Object.TemplateIterator.handleSplices (http://localhost/WebSpikeClient/vendor/openfin/fin-hypergrid.min.html:20:22075)
at Object.Observer.report_ (http://localhost/WebSpikeClient/vendor/openfin/fin-hypergrid.min.html:19:9004)
at Object.createObject.check_ (http://localhost/WebSpikeClient/vendor/openfin/fin-hypergrid.min.html:19:12345)
at callback (http://localhost/WebSpikeClient/vendor/openfin/fin-hypergrid.min.html:19:5926)Observer.report_ @ fin-hypergrid.min.html:19

Any clue why this is happening?

Expand Unit/e2e test suite.

need more tests.

"Undefined is not a function" at `flags.log.split`

When running the examples (tt, twohundred, standalone - I didn't test the others) I see this error in the console, which seems to expect flags.log to be a string.

request for event

Hello,
I would like to request the event 'fin-header-click'. So that when a column is sorted by the user this event should fire.
At the moment this is a workaround:

jsonGrid.addFinEventListener('fin-click', function(event) { 
            if(event.detail.gridCell.y === -1){
                let x = event.detail.gridCell.x
                console.log(`sorting for column requested: ${colums[x+1]).name}`);
            }
        });

Maybe in the event details it should provide the information if the column is sorted asc or desc.

Also I want to overwrite the sorting functionality.

-----------update:

I would need the functionality to totally mute the default sorting behaviour and sort the table by providing new sorted data manually.

Feature: Frozen columns

it would be nice to have, thx

sorting will result in an infinite loop

Hello,
I am experiencing a high cpu load after some time with the table.
Today I found out that getFixedRowValue on the behavior model is somehow trapped in an endless loop.

To reproduce please put in an log message in getFixedRowValue in fin-hypergrid-behavior-json.js and trigger a column sort:

https://github.com/openfin/fin-hypergrid/blob/master/polymer/js/behaviors/fin-hypergrid-behavior-json.js#L448 is where you can put console.log('test',x) and then click on column sort in the json behavior example.

I am having problems continuing writing my own sort solution because of this issue.

Instant Edit

Excel like instant edit feature where the editing starts as soon as you begin typing.

Next release?

We're looking to use hypergrid but the last release was in November; is there any news on when the latest one will come about?