DataGridTable

Renders the virtualised 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.


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 "@instruments/materia-ui/compositions/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.
Sorting and filtering come from the column definitions: a plain-text header sorts on click, and meta: { filter: true } adds a values menu. Build the table with useDataGridTable and pair it with PageToolbarTableFilters / PageToolbarTableSort above the grid; all of them share one state.
Rows are virtualised, 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 virtualisation 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>`
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>`

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>`
dndRef	`React.Ref<HTMLTableCellElement>`
dndStyle	`React.CSSProperties`

DataGridTableHeadRowCellResize

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

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

Center, DataGrid, Flex, Spinner