@virtuoso.dev/data-table is a virtualized React data table with row and column virtualization, grouped data support, sticky columns, state persistence, and column resizing, reordering, and visibility features.

It is the successor to TableVirtuoso when you need a table-specific API instead of a virtualized HTML table primitive. The recommended distribution is the shadcn-style wrapper published from virtuoso.dev, which gives you styled cells and headers while keeping the headless engine available for advanced behavior.

Choose your starting point

Shadcn installation for the fastest path to a polished table
Headless installation for custom design systems or non-Tailwind stacks
Data model for local and remote models
Columns for headers, cells, column groups, sticky pinning, visibility, resizing, reordering, and dynamic schemas
Grouped rows, state persistence, and controlling the table from surrounding UI

Quick start

import { DataTable, DataTableCell, DataTableColumn, DataTableColumnHeader } from '@/components/ui/data-table'
import { localModel } from '@virtuoso.dev/data-table'

const products = [
  { id: 'SKU-001', name: 'Standing Desk', category: 'Office', price: 699, stock: 14 },
  { id: 'SKU-002', name: 'USB-C Dock', category: 'Peripherals', price: 229, stock: 42 },
  { id: 'SKU-003', name: 'Mechanical Keyboard', category: 'Peripherals', price: 169, stock: 28 },
  { id: 'SKU-004', name: 'Noise-canceling Headset', category: 'Audio', price: 319, stock: 9 },
]

const currency = new Intl.NumberFormat('en-US', {
  currency: 'USD',
  style: 'currency',
})

const model = localModel({ data: products })

export default function App() {
  return (
    <DataTable className="rounded-xl" model={model} style={{ height: 320 }}>
      <DataTableColumn field="name">
        <DataTableColumnHeader>Name</DataTableColumnHeader>
        <DataTableCell className="font-medium">{({ cellValue }) => String(cellValue)}</DataTableCell>
      </DataTableColumn>
      <DataTableColumn field="category">
        <DataTableColumnHeader>Category</DataTableColumnHeader>
        <DataTableCell>{({ cellValue }) => String(cellValue)}</DataTableCell>
      </DataTableColumn>
      <DataTableColumn field="price">
        <DataTableColumnHeader className="justify-end">Price</DataTableColumnHeader>
        <DataTableCell className="text-right tabular-nums">{({ cellValue }) => currency.format(Number(cellValue))}</DataTableCell>
      </DataTableColumn>
      <DataTableColumn field="stock">
        <DataTableColumnHeader className="justify-end">Stock</DataTableColumnHeader>
        <DataTableCell className="text-right tabular-nums">{({ cellValue }) => String(cellValue)}</DataTableCell>
      </DataTableColumn>
    </DataTable>
  )
}

Migrating from `TableVirtuoso`

If you are coming from TableVirtuoso, start by moving row rendering logic into DataTableColumn definitions:

itemContent becomes one or more DataTableCell renderers
sticky or grouped structures move into sticky, GroupHeaderCell, and ColumnGroup
programmatic scrolling moves to table instance control with engineRef / engineId and scrollToRow$

For teams already standardized on shadcn/ui, the wrapper keeps the migration surface small because the styled building blocks are installed into your app and can be edited like any other component.

See Migrating From TableVirtuoso for the full mapping.

Documentation map

Start with the two required setup tasks:

Data model with localModel() or remoteModel().
Columns with DataTableColumn, headers, and cells.

Then add the features your table needs:

Column groups and sticky columns for wide operational tables
Column visibility, resizing, and reordering for user-controlled layouts
Grouped rows for sectioned local and remote datasets
State persistence for saving table feature state and model action state
Controlling the table from toolbars and surrounding UI

Visual customization is covered separately:

styling cells, headers, and rows
replacing internals
empty and loading states
scroll containers
ambient context — a bag of values available throughout the table's customizable parts
header slots — mount sort buttons, filter menus, and other controls inside column headers
inside the shadcn wrapper — change app-wide defaults by editing the wrapper file
remote column sorting — connect shadcn header sort buttons to request params