Virtual Scrolling

Render only visible rows for large datasets with a lightweight zero-dependency virtualizer.

virtualized renders only the rows in view, plus five above and five below. A 400 px box holds about nine rows under its column header at the default row height of 40 px, so the table keeps around twenty in the DOM whether the set has a thousand rows or a hundred thousand. Reach for it once the browser is doing more drawing than the reader can see.

10,000 Rows

Scroll the container, sort a column, search: the row count never reaches the DOM.

#	Name	Role	Department	Location

<Table
  items={largeDataset}
  {columns}
  virtualized
  virtualHeight="400px"
/>

Every row is in one scrollable box, so there are no pages to turn: with client-side data the pager is gone while virtualized is set. A server source keeps its pager — the box scrolls the loaded page, and paging stays the way to the rest of the result. Sorting, filtering, search, selection and keyboard navigation work as they do anywhere else, because what gets virtualized is your filtered and sorted data. The column header stays pinned to the top of the box and a summary row to its bottom while the rows scroll between them — and when a filter leaves too few rows to fill the box, the summary sits under the last one rather than at the bottom edge. virtualHeight is the height of that whole box, header and summary included (default '600px'), and takes any CSS length, so '60vh' and 'calc(100vh - 200px)' work as well as a pixel value.

Grouping is switched off, not just hidden

Grouped virtualization is not implemented, and a grouping that slipped through would put every row back in the DOM. So the table renders ungrouped whichever way the grouping arrives (view defaults, URL, storage), hides the grouping affordances and warns in dev. The value itself stays put — the URL keeps its parameter, and a grouping the reader chose earlier applies again on a page without virtualized. Either group on the server, or drop virtualized.

Row heights are uniform

The virtualizer measures one rendered row and strides in that height for all of them, so a row that grows (wrapping text, expanded content) lands in the wrong place. Those rows need the unvirtualized table.