Virtual Data Table

Same toolbar, search, sort, and selection as Data Table — but the body is virtualized with `@tanstack/react-virtual`, so rendering thousands of rows stays smooth. Optional pagination on top of virtualization.

Lightspeed

10,000 rows · sort, search, select, reorder columns

Rendering 10,000 rows — only the visible window is in the DOM.

<VirtualDataTableRoot
  items={rows}
  columns={columns}
  enableSelection
  defaultSort={{ columnId: "unit", direction: "asc" }}
>
  <DataTableToolbar>
    <DataTableSearch />
    <DataTableColumnOrder />
    <DataTableViewOptions />
  </DataTableToolbar>
  <VirtualDataTableContent rowHeight={52} height="32rem" overscan={12} />
</VirtualDataTableRoot>