Virtualization

Virtualization renders only the cells currently in view, keeping large tables fast. The data table supports both row and column virtualization.

Row virtualization

Set enableRowVirtualization: true to render only the visible rows. This is recommended once you have more than roughly 100 rows.

With row virtualization on, the table surface becomes the scroll container, so give it a bounded height via slotProps.surface (it defaults to a viewport-based height).

import { DataTable, useDataTable } from "@/components/ui/data-table"

const table = useDataTable({
  data,
  columns,
  getRowId: (row) => row.id,
  enableRowVirtualization: true,
  slotProps: { surface: { className: "max-h-[600px]" } },
  estimateRowHeight: 52,
  virtualOverscan: 8,
})

return <DataTable table={table} />

Tune the behavior with estimateRowHeight (default 52) and virtualOverscan (default 8, the number of extra rows rendered above and below the viewport).

Advanced virtualizer control

For finer control, both virtualizers expose the underlying @tanstack/react-virtual API.

Pass rowVirtualizerOptions / columnVirtualizerOptions to merge extra options into the useVirtualizer call. They override the built-in count, estimateSize, overscan, and measureElement, and accept either an object or a ({ table }) => options function:

const table = useDataTable({
  data,
  columns,
  enableRowVirtualization: true,
  rowVirtualizerOptions: { overscan: 12, gap: 4 },
})

To drive the virtualizer imperatively (for example, to scroll to a row), pass a ref via rowVirtualizerInstanceRef / columnVirtualizerInstanceRef:

import { useRef } from "react"
import type { DataTableRowVirtualizer } from "@/components/ui/data-table"

const rowVirtualizerRef = useRef<DataTableRowVirtualizer>(null)

const table = useDataTable({
  data,
  columns,
  enableRowVirtualization: true,
  rowVirtualizerInstanceRef: rowVirtualizerRef,
})

// later, e.g. in an effect or event handler:
rowVirtualizerRef.current?.scrollToIndex(100)

Column virtualization

For very wide tables, set enableColumnVirtualization: true to virtualize columns. This applies fixed column widths. Column pinning (pinned columns stay in place while you scroll sideways), column ordering and grouped headers all work with it.

import { DataTable, useDataTable } from "@/components/ui/data-table"

const table = useDataTable({
  data,
  columns,
  getRowId: (row) => row.id,
  enableColumnVirtualization: true,
  enablePagination: false,
})

return <DataTable table={table} />

Relevant options

Related