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 viewport holds about seven rows at the default size, so the table keeps under twenty in the DOM whether the set has a thousand rows or a million. Reach for it once the browser is doing more drawing than the reader can see.

10,000 Rows

One scrollable container instead of pages.

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

Every row is in one scrollable container, so there are no pages to turn: the pager is gone while virtualized is set. virtualHeight takes any CSS length, so '60vh' and 'calc(100vh - 200px)' work as well as a pixel value. Selection and keyboard navigation behave as they do anywhere else.

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 drops it whichever way it arrives — view defaults, URL, storage — and hides the grouping affordances, with a warning in dev. The discard is the table's decision rather than the reader's: the URL is cleaned, storage is left alone, and a grouping the reader chose earlier applies again on a page without virtualized. Group on the server, or drop virtualized.

Row heights are fixed

The virtualizer computes positions from one height per size (48, 56 and 64 px for sm, md and lg), so a row that grows — wrapping text, expanded content — lands in the wrong place. Those rows need the unvirtualized table.