Hacker News Reader

Comment by pugio | Hacker News Reader

I have been looking for years for something to replace a custom rendered excel-like table I have.

The table has a complex layout:

- One fixed top row (date), two or three fixed columns on the left.

- Data are rendered horizontally; the number of rows does not change, but the number of columns can be in the hundreds.

Does your library support column-oriented data like this (you mention "60+" columns)? Does anyone know of any library which can easily render something like this? It's surprisingly hard to find something which lets you fix left hand columns and also render as many columns as I need.

View on HN

JPMorgan has open-sourced a DOM based table that might work for you: https://github.com/jpmorganchase/regular-table.

Here's their excel like example showing 200 columns: https://bl.ocks.org/texodus/3e0e3d6f8bf8b47294a7847b402b55fb

Hi,

The component actually did have fixed/frozen columns/rows in an earlier version, but I decided to leave out the feature for a v1. I plan to reintroduce it after more popular features have been implemented.

DGXL is able to handle hundreds of columns. The reason why it says 60+ specifically is that, according to browser-vendors like Mozilla, a DOM node should ideally not have more than 60 child nodes - for performance/memory reasons.

Are columns virtualized as well? That could get over the child node restrictions for performance.

Yes. Let's say your data grid has 200 columns, but only 10 columns (DOM nodes) are rendered in the viewport. The other 190 columns are cached.

When scrolling horizontally, column nodes are appended/preprended on-the-fly. The old ones are only removed if the scrolling stops (until that time, column nodes that are outside the viewport are just made invisible by setting their opacity to 0).

If a user scrolls really fast without stopping in between, they might have 200 column nodes in the DOM. The DOM nodes are then only removed when scrolling stops.

Performance wise I haven't seen any problems with 200 columns or more.

You could take a look at https://rowsncolumns.app , You can render as many columns as you want since the grid supports windowing.

Ah, finance.

Reply on news.ycombinator.com