React Virtualized Data Grid

Copy Page

Fifty thousand rows in the DOM will freeze a browser; fifty in the DOM will not. This grid renders only the window you can see and repositions it as you scroll — the readout shows exactly which rows are live at any moment.

Installation

Props

How the windowing works

A single tall spacer, rows.length × rowHeight high, gives the scrollbar its full range. On scroll, the first visible index is floor(scrollTop / rowHeight); the grid slices a small band around it — plus overscan rows above and below so fast scrolling never flashes a blank edge — and positions each visible row absolutely at index × rowHeight. The DOM holds roughly twenty rows regardless of whether the dataset is fifty or fifty thousand.

The one constraint this buys performance with is a fixed row height. Variable heights need measured offsets and a very different implementation; if your rows genuinely differ in height, this is the wrong component. For tabular data — which is almost always uniform — the fixed height is the right trade, and sorting still operates over the entire dataset, not just the visible window.