Virtuoso Data Table | Virtuoso Skip to content Search CtrlK Cancel
Navigation<br>React Virtuoso in Github
Virtuoso Data Table
@virtuoso.dev/data-table is a virtualized React data table with row and column virtualization,<br>grouped data support, sticky columns, state persistence, and column resizing, reordering, and<br>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<br>Section titled “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<br>Section titled “Quick start”
\n \n Name\n {({ cellValue }) => String(cellValue)}\n \n \n Category\n {({ cellValue }) => String(cellValue)}\n \n \n Price\n {({ cellValue }) => currency.format(Number(cellValue))}\n \n \n Stock\n {({ cellValue }) => String(cellValue)}\n \n \n )\n}"],"lang":[0,"tsx"]}" ssr client="idle" opts="{"name":"LiveCodeBlock","value":true}" await-children>import { DataTable, DataTableCell, DataTableColumn, DataTableColumnHeader } from '@/components/ui/data-table'<br>import { localModel } from '@virtuoso.dev/data-table'
const products = [<br>{ id: 'SKU-001', name: 'Standing Desk', category: 'Office', price: 699, stock: 14 },<br>{ id: 'SKU-002', name: 'USB-C Dock', category: 'Peripherals', price: 229, stock: 42 },<br>{ id: 'SKU-003', name: 'Mechanical Keyboard', category: 'Peripherals', price: 169, stock: 28 },<br>{ id: 'SKU-004', name: 'Noise-canceling Headset', category: 'Audio', price: 319, stock: 9 },
const currency = new Intl.NumberFormat('en-US', {<br>currency: 'USD',<br>style: 'currency',<br>})
const model = localModel({ data: products })
export default function App() {<br>return (
Name<br>{({ cellValue }) => String(cellValue)}
Category<br>{({ cellValue }) => String(cellValue)}
Price<br>{({ cellValue }) => currency.format(Number(cellValue))}
Stock<br>{({ cellValue }) => String(cellValue)}
" style="height:100%;width:100%" title="Live code preview">
Migrating from TableVirtuoso<br>Section titled “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<br>Section titled “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<br>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
License<br>Section titled “License”
MIT
© Martiti 2 LTD