Deephaven Data Grid
A high-performance TypeScript React data grid optimized for displaying massive, real-time data sets. Built for finance quants on Wall Street.
9,007,199,254,740,991 rows ought to be enough for anyone.
Built to support massive datasets and fast updates
Staying in the flow makes all the difference. Interruptions from things like pagination or slow grids break your focus. Summary statistics are helpful, but directly interacting with your data is important too. Quickly opening and exploring any DataFrame, no matter its size or how fast it's changing, helps you instantly get a "feel" for your data.
Example use cases
- Viewing live market trade data
- Displaying multi-gigabyte Parquet files
- Exploratory data analysis
When to use this
When not to use this
- Your data is less than a million rows
- Your data updates slowly or never
- Your users need mobile or touch support
- Your users need A11y support for screen readers
- You need paid support and are not already a Deephaven Enterprise customer
- Time to customize matters more than performance
Features
Base grid
Raw grid for new integrations
Base grid renderer. Renders rows and scrollbars, built for extending with event handlers and building new integrations.
- Bring your own data-model
- Fast rendering, using an optimized HTML canvas element
- Support for quadrillions of rows and columns
- Ticking/streaming data support
- A flexible data model that can add, remove, or change a table's rows or even columns
- Excel-like keyboard shortcuts
- Resizable rows/columns
- Rearrangeable rows/columns
- Freezable rows/columns
- Column visibility options; hideable columns
- Customizable themes
- Row, column and range selections
- Input for editable models
Iris grid
For Deephaven backends
Feature rich, with built-in integration to the Deephaven back-end. Optimized for over the wire data-viewports from Deephaven, built on top of the base grid.
- Automatic row and column viewporting
- Sorting, multi-column sorting, reversing
- Advanced filtering
- Column descriptions
- Automatic column summary statistics
- Row grouping
- Aggregations
- Conditional row/cell formatting
- Formula-based columns added to tables
- Rollup rows
- Aggregate columns
- Select distinct values
- Conditional formatting
- Data bar formatting
- Column header groups
- Streaming download as CSV
- Go to row
- Cross column search
Comparisons
Comparing Deephaven Data Grid to other grids we like. AG Grid and Glide Data Grid are both robust, full-featured options. If you need just a base grid, regular-table is also a great DOM-based choice to build upon.
| AG Grid | Glide Grid | regular-table | Deephaven | |
|---|---|---|---|---|
| Data size | ~2M rows* | ~2M rows* | ~2M rows* | 9 Quadrillion rows |
| Render speed | Slow | Fast | Slow | Fast |
| Server-Side models | Yes | Yes | Yes | Yes |
| Accessibility | Yes | Yes | Yes | No |
| Copy and Paste | Yes | Yes | N/A | Yes (Iris) |
| CSV Export | Yes | N/A | N/A | Yes (Iris) |
| Custom Formatters | Yes | Yes | Yes | Yes |
| Draggable Rows | Yes | No | No | Yes |
| Editable Cells | Yes | Yes | No | Yes |
| Custom Cell Editors | Yes | Yes | Yes | No |
| Fill Down | Yes | Yes | No | No |
| Fill Right | Yes | No | No | No |
| Filtering | Yes | Yes | Yes | Yes (Iris) |
| Formula Support | Yes | No | No | Yes (Iris) |
| Freezable Columns | Yes | Yes | Yes | Yes |
| Open-source | No | Yes | Yes | Yes |
| Pivot Tables | Yes | No | Yes | Enterprise only |
| Range Selection | Yes | Yes | Yes | Yes |
| Resizable Columns | Yes | Yes | Yes | Yes |
| Row Grouping | Yes | No | Yes | Yes |
| Row Selection | Yes | Yes | Yes | Yes |
| TypeScript | Yes | Yes | No | Yes |
| Virtualization | Yes | Yes (canvas) | Yes | Yes (canvas) |
*Although these grids claim higher capacity, we find that scrolling becomes problematic beyond this amount. Grids using native scrollbars tend to jump thousands of rows uncontrollably when scrolling once the number of rows exceeeds the max browser scrollbar height divided by the row height (typically ~2 million rows).
Technical details
Deephaven's data grid uses optimized draw calls to an HTML5 canvas to render the grid and scrollbars, rather than relying on the DOM. This approach allows the grid to create scrollbars taller than the typical 33,000,000 height limit imposed by browsers, supporting a MAX_SAFE_INT number of rows instead.
Additionally, using the canvas instead of the DOM generally enables faster redrawing of full-screen tables compared to regular DOM calls, thanks to smarter caching and other optimization strategies. The downside is that the canvas is harder to manage internally, requiring more effort to create new cell renderers while maintaining a high level of performance.
A core principle of the Deephaven grid is that the server (or a client side data model) is expected to handle all the heavy lifting, with the grid acting strictly as a renderer. Aside from driving new interactions and minor formatting, the grid is treated as a dumb client. The server or data model is responsible for viewporting rows and columns to drive the grid and applying all data transformations.