DataGridTable

Renders the virtualized header and body rows for a DataGrid. Consumes the surrounding DataGrid context, so it must live inside a DataGrid provider and shell. Rows are windowed with @tanstack/react-virtual.

Material	Substrate	Finish
Carrara Marble	Stone	Honed
White Oak Plank	Wood	Matte
Basalt Slab	Stone	Polished

Usage

import { DataGridTable, DataGridTableBase, DataGridTableBody, DataGridTableBodyRow, DataGridTableBodyRowCell, DataGridTableBodyRowExpandded, DataGridTableBodyRowSkeleton, DataGridTableBodyRowSkeletonCell, DataGridTableEmpty, DataGridTableHead, DataGridTableHeadRow, DataGridTableHeadRowCell, DataGridTableHeadRowCellResize, DataGridTableLoader, DataGridTableRowSelect, DataGridTableRowSelectAll, DataGridTableRowSpacer } from "@desk/ui/components/data-grid-table";

Best practices

Render inside DataGrid (and its shell) — it calls useDataGrid() for the table and layout and throws outside the provider; it takes no table prop of its own.
Rows are virtualized, so give each a stable rowHeight via tableLayout (expanded rows use expandedRowHeight) — variable, unmeasured heights make the window jump.
Use DataGridTable for a data-driven grid; for a small static table with hand-authored <TableRow>s reach for Table instead — no virtualization or TanStack instance needed.

Props

DataGridTableBase

Prop	Type	Default	Description
children(required)	`React.ReactNode`

DataGridTableBody

Prop	Type	Default	Description
children(required)	`React.ReactNode`

DataGridTableBodyRow

Prop	Type	Default	Description
children(required)	`React.ReactNode`
row(required)	`Row<TData>`
dndRef	`React.Ref<HTMLTableRowElement>`
dndStyle	`React.CSSProperties`
dataIndex	`number`

DataGridTableBodyRowCell

Prop	Type	Default	Description
children(required)	`React.ReactNode`
cell(required)	`Cell<TData, unknown>`
dndRef	`React.Ref<HTMLTableCellElement>`
dndStyle	`React.CSSProperties`

DataGridTableBodyRowExpandded

Prop	Type	Default	Description
row(required)	`Row<TData>`

DataGridTableBodyRowSkeleton

Prop	Type	Default	Description
children(required)	`React.ReactNode`

DataGridTableBodyRowSkeletonCell

Prop	Type	Default	Description
children(required)	`React.ReactNode`
column(required)	`Column<TData, unknown>`

DataGridTableHead

Prop	Type	Default	Description
children(required)	`React.ReactNode`

DataGridTableHeadRow

Prop	Type	Default	Description
children(required)	`React.ReactNode`
headerGroup(required)	`HeaderGroup<TData>`

DataGridTableHeadRowCell

Prop	Type	Default	Description
children(required)	`React.ReactNode`
header(required)	`Header<TData, unknown>`
dndRef	`React.Ref<HTMLTableCellElement>`
dndStyle	`React.CSSProperties`

DataGridTableHeadRowCellResize

Prop	Type	Default	Description
header(required)	`Header<TData, unknown>`

DataGridTableRowSelect

Prop	Type	Default	Description
row(required)	`Row<TData>`
size	`"base" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl"`

DataGridTableRowSelectAll

Prop	Type	Default	Description
size	`"base" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl"`

Also exports

componentDataGridTable
componentDataGridTableEmpty
componentDataGridTableLoader
componentDataGridTableRowSpacer

Composition

Builds on

DataGrid, Spinner