Grid-o-Matic demo

What is it

A high performance grid/spreadsheet-like component for viewing and exploring tabular data in a Web browser.

How is it different from other implementations

Spreadsheet-like user interface

For viewing and exploring large tables in a browser a Data-table works great. Most of the current Data-table implementations use paging to manage the data (usually Database backed) but to my mind they lack something in usability. Certain features of Spreadsheet UI like fixed headers and their scrolling behavior make it convenient to browse large tables. This software is my attempt to develop a Google Sheets inspired Data-table for the Web apps.

Performance

This is one of the fastest Data-table implementation available!
Scrolling and view updating is very fast. Sorting, filtering and searching performance is actually comparable to Microsoft Excel (a native desktop application)!
Supports tables with 1 million+ rows and 10 million+ cells.

Example

Here's a table with 100,000 rows and 1 million cells containing the all time Motorcycle GP winners (padded with random data):

If you are only want to see the GP stats, use a combination of projection (hide columns) and selection (filter out rows containing 'RandXYZ') to remove the random garbage data.

Resize table

Features

• Spreadsheet-like scrolling with fixed headers eschewing paging.Keys: ←, ↑, ↓, →, Home, End, Page Up, Page Down.
• Supports tables with million+ rows and 10 million+ cells.
• Long running computations (sorting, filtering, CSV...) are run in a seperate thread (web workers) so that the UI remains responsive even when working with large tables.
• Completely browser based implementation using JSON or CSV as the data interchange format. The data can come from anywhere: database, server generated or the browser itself.
• Supports server-side streaming of table data.
• Multi-column sorting. (stable sort).Click (or Ctrl+click) on a column header to sort. For multi-column sorting: while keeping the Shift key pressed, click on the column headers.
• Filtering.
• Searching.
• Column reordering.Drag and drop the column header.
• Column resizing.
• Column hiding.Click on the button at the intersection of the column and row headers.
• Export table to CSV file format (supported by all Spreadsheet software).

How to get it

I have developed this software as a proof of concept, it isn't open-source (yet).

Contact

If you wish to contact me you can send me a mail.