JavaScript data grid for millions of rows [closed]

JavaScript data grid for millions of rows [closed]

I need to present a large number of rows of data (ie. millions of rows) to the user in a grid using JavaScript.
The user shouldn’t see pages or view only finite amounts of data at a time.
Rather, it should appear that all of the data are available.
Instead of downloading the data all at once, small chunks are downloaded as the user comes to them (ie. by scrolling through the grid).
The rows will not be edited through this front end, so read-only grids are acceptable.
What data grids, written in JavaScript, exist for this kind of seamless paging?

Solutions/Answers:

Solution 1:

(Disclaimer: I am the author of SlickGrid)

UPDATE
This has now been implemented in SlickGrid.

Please see http://github.com/mleibman/SlickGrid/issues#issue/22 for an ongoing discussion on making SlickGrid work with larger numbers of rows.

The problem is that SlickGrid does not virtualize the scrollbar itself – the scrollable area’s height is set to the total height of all the rows. The rows are still being added and removed as the user is scrolling, but the scrolling itself is done by the browser. That allows it to be very fast yet smooth (onscroll events are notoriously slow). The caveat is that there are bugs/limits in the browsers’ CSS engines that limit the potential height of an element. For IE, that happens to be 0x123456 or 1193046 pixels. For other browsers it is higher.

Related:  AngularJS Authentication + RESTful API

There is an experimental workaround in the “largenum-fix” branch that raises that limit significantly by populating the scrollable area with “pages” set to 1M pixels height and then using relative positioning within those pages. Since the height limit in the CSS engine seems to be different and significantly lower than in the actual layout engine, this gives us a much higher upper limit.

I am still looking for a way to get to unlimited number of rows without giving up the performance edge that SlickGrid currently holds over other implementations.

Rudiger, can you elaborate on how you solved this?

Solution 2:

http://wiki.github.com/mleibman/SlickGrid/

SlickGrid utilizes virtual rendering to enable you to easily work with hundreds of thousands of items without any drop in performance. In fact, there is no difference in performance between working with a grid with 10 rows versus a 100’000 rows.

Some highlights:

  • Adaptive virtual scrolling (handle hundreds of thousands of rows)
  • Extremely fast rendering speed
  • Background post-rendering for richer cells
  • Configurable & customizable
  • Full keyboard navigation
  • Column resize/reorder/show/hide
  • Column autosizing & force-fit
  • Pluggable cell formatters & editors
  • Support for editing and creating new rows.
    by mleibman
Related:  How do I write a RGB color value in JavaScript?

It’s free (MIT license).
It uses jQuery.

Solution 3:

The best Grids in my opinion are below:

My best 3 options are jqGrid, jqxGrid and DataTables. They can work with thousands of rows and support virtualization.

Solution 4:

I don’t mean to start a flame war, but assuming your researchers are human, you don’t know them as well as you think. Just because they have petabytes of data doesn’t make them capable of viewing even millions of records in any meaningful way. They might say they want to see millions of records, but that’s just silly. Have your smartest researchers do some basic math: Assume they spend 1 second viewing each record. At that rate, it will take 1000000 seconds, which works out to more than six weeks (of 40 hour work-weeks with no breaks for food or lavatory).

Do they (or you) seriously think one person (the one looking at the grid) can muster that kind of concentration? Are they really getting much done in that 1 second, or are they (more likely) filtering out the stuff the don’t want? I suspect that after viewing a “reasonably-sized” subset, they could describe a filter to you that would automatically filter out those records.

Related:  What format does the highcharts js library accept for dates?

As paxdiablo and Sleeper Smith and Lasse V Karlsen also implied, you (and they) have not thought through the requirements. On the up side, now that you’ve found SlickGrid, I’m sure the need for those filters became immediately obvious.

Solution 5:

I can say with pretty good certainty that you seriously do not need to show millions of rows of data to the user.

There is no user in the world that will be able to comprehend or manage that data set so even if you technically manage to pull it off, you won’t solve any known problem for that user.

Instead I would focus on why the user wants to see the data. The user does not want to see the data just to see the data, there is usually a question being asked. If you focus on answering those questions instead, then you would be much closer to something that solves an actual problem.

Solution 6:

I recommend the Ext JS Grid with the Buffered View feature.

http://www.extjs.com/deploy/dev/examples/grid/buffer.html