DataTable

An unstyled data table with sort, filter, pagination, selection, expansion, editing, column reorder/resize, row reorder, grouping, frozen sections, CSV export, and tree mode.

Compose a fully custom table with complete control over markup, layout, and styling. Every feature is opt-in and driven by data attributes.

Code	Name	Category	Price

basic-demo

Pre-styled Versions

Choose a pre-styled library to use DataTable with ready-made designs.

Styled

Theme-based styling with CSS variables

Tailwind

Utility-first styling with Tailwind CSS

For hook-based usage without components, see the Headless API.

Features#

Compound component API with sub-components: Root, Header, TableContainer, Table, THead, THeadRow, THeadCell, TBody, FrozenTBody, Row, Cell, TFoot, TFootRow, TFootCell, Footer, Sort, SortIndicator, SortOrder, Filter, Pagination, Selection, RowToggle, RowToggleIndicator, RowExpansion, RowGroupHeader, RowGroupFooter, CellEditor, CellEditorDisplay, CellEditorContent, RowEditor, RowEditorInit, RowEditorSave, RowEditorCancel, ColumnToggle, ColumnReorder, ColumnReorderTarget, ColumnResizer, ColumnResizeIndicator, RowReorder, Export, Loading, EmptyTBody
Sort (single, multi, removable), row and menu filters per column, plus a global filter across selected fields
Pagination with built-in slicing or lazy mode
Selection in single, multiple checkbox, multiple row, or radio modes; Shift for range, Ctrl/Meta to add or remove
Cell or row editing with Tab traversal, outside-click commit, and Escape cancel
Column reorder, column resize (fit or expand), and row reorder via drag handles
Frozen left and right columns via the frozen prop on Cell and THeadCell
Tree mode reuses the same components; flip treeMode on Root and feed it { key, data, children? } nodes
CSV export with custom fields and headers

Usage#

import { DataTable } from 'primereact/datatable';

<DataTable.Root data={products} dataKey="id">
    <DataTable.TableContainer>
        <DataTable.Table>
            <DataTable.THead>
                <DataTable.THeadRow>
                    <DataTable.THeadCell>Name</DataTable.THeadCell>
                    <DataTable.THeadCell>Category</DataTable.THeadCell>
                </DataTable.THeadRow>
            </DataTable.THead>
            <DataTable.TBody>
                {({ item }) => (
                    <DataTable.Row>
                        <DataTable.Cell>{item.name}</DataTable.Cell>
                        <DataTable.Cell>{item.category}</DataTable.Cell>
                    </DataTable.Row>
                )}
            </DataTable.TBody>
        </DataTable.Table>
    </DataTable.TableContainer>
</DataTable.Root>

Behavior#

Render Function Children#

DataTable.TBody accepts a render function that receives { item, index, groupMeta } for each row. Stateful sub-components (Selection, Pagination, Filter, Sort, RowToggle, CellEditor) also expose render-prop slot context so you can read live state and call exposed methods.

<DataTable.Sort field="price">{({ isSorted, sortOrder }) => <span>Price {isSorted ? (sortOrder === 1 ? '↑' : '↓') : ''}</span>}</DataTable.Sort>

Polymorphic Rendering#

Use as on any sub-component to swap the underlying element or render through another component (e.g. a styled Button for Sort triggers).

<DataTable.RowEditorInit as={Button} variant="text" />

Sort#

Wrap header content in DataTable.Sort and provide field. Hold Ctrl / Cmd while clicking to multi-sort. Enable removableSort on Root for tri-state click cycles.

<DataTable.THeadCell>
    <DataTable.Sort field="price">
        Price <DataTable.SortIndicator match="asc">↑</DataTable.SortIndicator>
    </DataTable.Sort>
</DataTable.THeadCell>

Filter#

Render DataTable.Filter for each filterable column and a separate keyword input bound to globalFilter. Use display="row" for inline filters that apply on every change, or display="menu" for an overlay with multiple constraints, AND/OR operators, and explicit Apply / Clear.

<DataTable.Filter field="name" display="row" dataType="text">
    {({ value, onChange }) => <input value={value ?? ''} onChange={(e) => onChange(e, e.target.value)} />}
</DataTable.Filter>

Selection#

Set selectionMode on Root to 'single' or 'multiple' and wrap each cell or header trigger in DataTable.Selection. The slot context exposes isSelected / toggle for rows and isAllSelected / isSomeSelected / toggleAll for headers.

<DataTable.Selection>{({ isSelected, toggle }) => <Checkbox checked={isSelected} onCheckedChange={toggle} />}</DataTable.Selection>

Expansion & Tree Mode#

DataTable.RowToggle reads expansion state automatically and renders a leaf-spacer in tree mode when a row has no children, so indentation stays aligned. Setting treeMode on Root flips the table to role="treegrid" and stamps tree ARIA on every row.

<DataTable.Root treeMode dataKey="key" data={nodes}>
    {/* same Table / THead / TBody markup; rows now indent automatically */}
</DataTable.Root>

Cell and Row Editing#

Wrap each editable cell in DataTable.CellEditor with field / rowIndex / rowData, and supply two slots: Display (read mode) and Content (edit mode). When editMode="row", replace the per-cell switch with RowEditor.Init / Save / Cancel triggers in a dedicated cell.

<DataTable.CellEditor field="price" rowIndex={index} rowData={item}>
    <DataTable.CellEditorDisplay>{item.price}</DataTable.CellEditorDisplay>
    <DataTable.CellEditorContent>
        <input defaultValue={item.price} />
    </DataTable.CellEditorContent>
</DataTable.CellEditor>

Column Reorder & Resize#

Set reorderableColumns on Root and add a DataTable.ColumnReorder handle inside each THeadCell. For resizing, set resizableColumns and drop a DataTable.ColumnResizer inside the header — pair it with ColumnResizeIndicator for a live drag line.

Row Reorder#

Set reorderableRows on Root and add a DataTable.RowReorder handle in a row cell. The hook arms the surrounding <tr> as the drag source on pointer-down and emits onRowReorder with the new array.

Pagination#

Render DataTable.Pagination anywhere below the table; it acts as a render-prop wrapper that exposes page, pageCount, rows, totalRecords, first, canPrev, canNext, onPageChange, and onRowsChange.

<DataTable.Pagination>{({ page, pageCount, onPageChange }) => <div>{/* custom paginator UI */}</div>}</DataTable.Pagination>

Pass Through#

Some parts may not be visible in the preview depending on the component's current state.

Name	Category	Price

Pass Through Sections

Hover or click to explore component parts

/* Select a part to see its CSS selector for custom styling */

API#

DataTableRoot#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableRootInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableRootInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableRootInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableRootPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableRootInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`data`	`Record<string, unknown>[]` \| `object[]`	—
An array of objects to display.
`defaultValue`	`string`	—
Default sort value for uncontrolled mode.
`value`	`string`	—
Sort field value for controlled mode.
`dataKey`	`string`	—
A property to uniquely identify each row in the data.
`loading`	`boolean`	`false`
Whether the data is currently being loaded.
`lazy`	`boolean`	`false`
Defines if data is loaded and interacted with in lazy manner.
`totalRecords`	`number`	`0`
Number of total records, used in lazy mode.
`scrollable`	`boolean`	`false`
When enabled, the table can be scrolled horizontally and/or vertically.
`scrollHeight`	`string`	—
Height of the scroll viewport in fixed pixels or the "flex" keyword for a dynamic size.
`sortField`	`string`	`undefined`
Property name to sort by in single-sort mode.
`sortOrder`	`SortOrder`	`undefined`
Sort order for single-sort mode.
`defaultSortField`	`string`	`undefined`
Default sort field for uncontrolled single-sort mode.
`defaultSortOrder`	`SortOrder`	`undefined`
Default sort order for uncontrolled single-sort mode.
`multiSortMeta`	`SortMeta[]`	`undefined`
An array of SortMeta objects for multi-column sorting (controlled).
`defaultMultiSortMeta`	`SortMeta[]`	`undefined`
Initial multi-column sort metadata for uncontrolled mode.
`onSortChange`	`(event: DataTableSortEvent) => void`	—
Callback invoked when the sort state changes.
`removableSort`	`boolean`	`false`
When true, clicking a sorted column header a third time removes the sort.
`nullSortOrder`	`number`	`1`
Determines where null values are placed during sort. 1 = nulls last (default), -1 = nulls first.
`selectionMode`	`"multiple"` \| `"single"`	—
Defines the selection mode. 'single' allows one row, 'multiple' allows many.
`metaKeySelection`	`boolean`	`false`
When true, row click selection requires Ctrl/Cmd key. Without it, click selects only that row. Shift+Click extends range. Only applies when selectionMode is set.
`selectedKeys`	`SelectionKeys`	`undefined`
The selection keys for controlled mode.
`defaultSelectedKeys`	`SelectionKeys`	`undefined`
The default selection keys for uncontrolled mode.
`onSelectionChange`	`(event: DataTableSelectionEvent) => void`	`undefined`
Callback invoked when the selection changes.
`page`	`number`	`undefined`
Current page number for controlled pagination (0-indexed).
`defaultPage`	`number`	`0`
Default page number for uncontrolled pagination (0-indexed).
`rows`	`number`	`undefined`
Number of rows to display per page for controlled mode.
`defaultRows`	`number`	`10`
Default number of rows to display per page for uncontrolled mode.
`rowsPerPageOptions`	`number[]`	`undefined`
Array of integer values to display inside the rows per page dropdown.
`paginator`	`boolean`	`false`
Whether pagination is enabled.
`onPageChange`	`(event: DataTablePageEvent) => void`	—
Callback invoked when the page or rows per page changes.
`expandedKeys`	`ExpandedKeys`	`undefined`
The expanded keys map for controlled row expansion.
`defaultExpandedKeys`	`ExpandedKeys`	`undefined`
The default expanded keys map for uncontrolled row expansion.
`onExpandedChange`	`(event: DataTableExpansionEvent) => void`	—
Callback invoked when the expanded keys change.
`groupField`	`string`	`undefined`
The field name to group rows by.
`reorderableColumns`	`boolean`	`false`
When enabled, columns can be reordered using drag and drop.
`onColumnReorder`	`(event: DataTableColumnReorderEvent) => void`	—
Callback invoked when columns are reordered.
`resizableColumns`	`boolean`	`false`
When enabled, columns can be resized using drag and drop.
`columnResizeMode`	`ColumnResizeMode`	`'fit'`
Defines whether the overall table width should change on column resize. 'fit' mode keeps total width the same. 'expand' mode increases total width.
`onColumnResizeEnd`	`(event: DataTableColumnResizeEvent) => void`	—
Callback invoked when a column resize ends.
`editMode`	`DataTableEditMode`	`undefined`
Defines the editing mode.
`editingKeys`	`EditingKeys`	`undefined`
The editing keys map for controlled row editing.
`defaultEditingKeys`	`EditingKeys`	`undefined`
The default editing keys for uncontrolled row editing.
`onEditingKeysChange`	`(event: DataTableEditingEvent) => void`	—
Callback invoked when the editing keys change.
`onRowEditInit`	`(event: DataTableRowEditEvent) => void`	—
Callback invoked when a row edit is initiated.
`onRowEditSave`	`(event: DataTableRowEditEvent) => void`	—
Callback invoked when a row edit is saved.
`onRowEditCancel`	`(event: DataTableRowEditEvent) => void`	—
Callback invoked when a row edit is cancelled.
`onCellEditInit`	`(event: { originalEvent: SyntheticEvent; field: string; rowIndex: number }) => void`	—
Callback invoked when a cell edit is initiated.
`onCellEditComplete`	`(event: DataTableCellEditEvent) => void`	—
Callback invoked when a cell edit completes.
`onCellEditCancel`	`(event: DataTableCellEditEvent) => void`	—
Callback invoked when a cell edit is cancelled.
`filters`	`DataTableFilterMeta`	`undefined`
Filter metadata for controlled mode.
`defaultFilters`	`DataTableFilterMeta`	`undefined`
Default filter metadata for uncontrolled mode.
`globalFilter`	`string`	—
Global filter value applied across globalFilterFields.
`globalFilterFields`	`string[]`	`undefined`
An array of field names to search with globalFilter.
`filterDelay`	`number`	`0`
Delay in ms before applying filter (for debounce).
`onFilter`	`(event: DataTableFilterEvent) => void`	—
Callback invoked when filters change.
`reorderableRows`	`boolean`	`false`
When enabled, rows can be reordered using drag and drop.
`onRowReorder`	`(event: DataTableRowReorderEvent) => void`	—
Callback invoked when rows are reordered.
`rowClassName`	`(data: Record<string, unknown>, options: { index: number; props: useDataTableProps }) => string`	—
A function that returns a className for a given row.
`onLazyLoad`	`(event: DataTableLazyLoadEvent) => void`	—
Callback invoked when lazy loading is triggered (page, sort, filter change in lazy mode).
`onRowClick`	`(event: DataTableRowMouseEvent) => void`	—
Callback fired when a row is clicked. Does NOT fire when the click originates on interactive content (buttons, inputs, checkboxes, radios) — those bubble their own semantics.
`onRowDoubleClick`	`(event: DataTableRowMouseEvent) => void`	—
Callback fired on row double-click.
`onRowContextMenu`	`(event: DataTableRowMouseEvent) => void`	—
Callback fired on row right-click (contextmenu). Does not prevent the default menu — call `event.originalEvent.preventDefault()` in the handler if you want to.
`rowHover`	`boolean`	`false`
When enabled, rows highlight on mouse hover via `data-row-hover` attribute on root.
`highlightOnSelect`	`boolean`	`true`
When enabled, selected rows are highlighted via `data-highlight-on-select` attribute on root.
`treeMode`	`boolean`	`false`
When enabled, data is treated as a tree structure with `key` , `data` , and `children` fields. Tree nodes are flattened internally and sort, filter, pagination operate on the tree structure. Pagination applies to root-level nodes only.
`size`	`"small"` \| `"large"`	`undefined`
Table size variant. Adjusts cell padding and font size via CSS.
`stripedRows`	`boolean`	`false`
When enabled, rows are rendered with alternating background colors.
`showGridlines`	`boolean`	`false`
When enabled, borders are displayed between cells.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datatable"`
`data-part`	`"root"`
`data-loading`	Present while loading
`data-row-hover`	Present when `rowHover` is true
`data-highlight-on-select`	Present when selected rows should highlight
`data-selection-mode`	`"single"` \| `"multiple"`
`data-size`	`"small"` \| `"large"`
`data-striped-rows`	Present when `stripedRows` is true
`data-show-gridlines`	Present when `showGridlines` is true

Defines passthrough(pt) options of DataTableRoot component.

label	type	description
root	DataTableRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.
header	DataTableRootPassThroughType<HTMLAttributes<HTMLElement>>	Used to pass attributes to the header's DOM element (above the table).
tableContainer	DataTableRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the table container's DOM element.
table	DataTableRootPassThroughType<HTMLAttributes<HTMLTableElement>>	Used to pass attributes to the table's DOM element.
head	DataTableRootPassThroughType<HTMLAttributes<HTMLTableSectionElement>>	Used to pass attributes to the thead's DOM element.
theadRow	DataTableRootPassThroughType<HTMLAttributes<HTMLTableRowElement>>	Used to pass attributes to the thead row's DOM element.
theadCell	DataTableRootPassThroughType<HTMLAttributes<HTMLTableCellElement>>	Used to pass attributes to the thead cell's DOM element.
body	DataTableRootPassThroughType<HTMLAttributes<HTMLTableSectionElement>>	Used to pass attributes to the tbody's DOM element.
frozenBody	DataTableRootPassThroughType<HTMLAttributes<HTMLTableSectionElement>>	Used to pass attributes to the frozen tbody's DOM element.
row	DataTableRootPassThroughType<HTMLAttributes<HTMLTableRowElement>>	Used to pass attributes to the row's DOM element.
cell	DataTableRootPassThroughType<HTMLAttributes<HTMLTableCellElement>>	Used to pass attributes to the cell's DOM element.
foot	DataTableRootPassThroughType<HTMLAttributes<HTMLTableSectionElement>>	Used to pass attributes to the tfoot's DOM element.
tfootRow	DataTableRootPassThroughType<HTMLAttributes<HTMLTableRowElement>>	Used to pass attributes to the tfoot row's DOM element.
tfootCell	DataTableRootPassThroughType<HTMLAttributes<HTMLTableCellElement>>	Used to pass attributes to the tfoot cell's DOM element.
footer	DataTableRootPassThroughType<HTMLAttributes<HTMLElement>>	Used to pass attributes to the footer's DOM element (below the table).
emptyTBody	DataTableRootPassThroughType<HTMLAttributes<HTMLTableRowElement>>	Used to pass attributes to the empty body's DOM element.
loading	DataTableRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the loading overlay's DOM element.
sort	DataTableRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the sort trigger's DOM element.
sortIndicator	DataTableRootPassThroughType<HTMLAttributes<HTMLElement>>	Used to pass attributes to the sort indicator's DOM element.
sortOrder	DataTableRootPassThroughType<HTMLAttributes<HTMLElement>>	Used to pass attributes to the multi-sort order badge's DOM element.
filter	DataTableRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the filter's DOM element.
rowToggle	DataTableRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the row toggle's DOM element.
rowToggleIndicator	DataTableRootPassThroughType<HTMLAttributes<HTMLElement>>	Used to pass attributes to the row toggle indicator's DOM element.
rowExpansion	DataTableRootPassThroughType<HTMLAttributes<HTMLTableRowElement>>	Used to pass attributes to the row expansion's DOM element.
rowGroupHeader	DataTableRootPassThroughType<HTMLAttributes<HTMLTableRowElement>>	Used to pass attributes to the row group header's DOM element.
rowGroupFooter	DataTableRootPassThroughType<HTMLAttributes<HTMLTableRowElement>>	Used to pass attributes to the row group footer's DOM element.
cellEditor	DataTableRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the cell editor's DOM element.
cellEditorDisplay	DataTableRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the cell editor display element.
cellEditorContent	DataTableRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the cell editor content element.
rowEditorInit	DataTableRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the row editor init button.
rowEditorSave	DataTableRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the row editor save button.
rowEditorCancel	DataTableRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the row editor cancel button.
rowReorder	DataTableRootPassThroughType<HTMLAttributes<HTMLElement>>	Used to pass attributes to the row reorder handle.
columnReorder	DataTableRootPassThroughType<HTMLAttributes<HTMLElement>>	Used to pass attributes to the column reorder handle.
columnResizer	DataTableRootPassThroughType<HTMLAttributes<HTMLElement>>	Used to pass attributes to the column resizer handle.
columnResizeIndicator	DataTableRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the column resize indicator's DOM element.
export	DataTableRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the export trigger's DOM element.

DataTableHeader#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableHeaderInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableHeaderInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableHeaderInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableHeaderPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableHeaderInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of DataTableHeader component.

label	type	description
root	DataTableHeaderPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

DataTableTableContainer#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableTableContainerInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableTableContainerInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableTableContainerInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableTableContainerPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableTableContainerInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datatable"`
`data-part`	`"table-container"`

Defines passthrough(pt) options of DataTableTableContainer component.

label	type	description
root	DataTableTableContainerPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

DataTableTable#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableTableInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableTableInstance) => string)`	—
The class name to apply to the component.
`as`	`ReactNode`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableTableInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableTablePassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableTableInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datatable"`
`data-part`	`"table"`
`role`	`"table"` or `"treegrid"`

Defines passthrough(pt) options of DataTableTable component.

label	type	description
root	DataTableTablePassThroughType<HTMLAttributes<HTMLTableElement>>	Used to pass attributes to the root's DOM element.

DataTableTHead#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableTHeadInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableTHeadInstance) => string)`	—
The class name to apply to the component.
`as`	`ReactNode`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableTHeadInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableTHeadPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableTHeadInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of DataTableTHead component.

label	type	description
root	DataTableTHeadPassThroughType<HTMLAttributes<HTMLTableSectionElement>>	Used to pass attributes to the root's DOM element.

DataTableTHeadRow#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableTHeadRowInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableTHeadRowInstance) => string)`	—
The class name to apply to the component.
`as`	`ReactNode`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableTHeadRowInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableTHeadRowPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableTHeadRowInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of DataTableTHeadRow component.

label	type	description
root	DataTableTHeadRowPassThroughType<HTMLAttributes<HTMLTableRowElement>>	Used to pass attributes to the root's DOM element.

DataTableTHeadCell#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableTHeadCellInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableTHeadCellInstance) => string)`	—
The class name to apply to the component.
`as`	`ReactNode`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableTHeadCellInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableTHeadCellPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableTHeadCellInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`colSpan`	`number`	`undefined`
Number of columns a header cell should span.
`rowSpan`	`number`	`undefined`
Number of rows a header cell should span.
`frozen`	`boolean`	`false`
Whether the column is frozen.
`alignFrozen`	`"left"` \| `"right"`	`'left'`
Position of the frozen column, valid values are "left" and "right".
`scope`	`"col"` \| `"colgroup"` \| `"row"` \| `"rowgroup"`	`'col'`
Defines the scope of the header cell.
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-frozen`	Present when the cell is frozen
`data-align-frozen`	`"left"` \| `"right"`

Defines passthrough(pt) options of DataTableTHeadCell component.

label	type	description
root	DataTableTHeadCellPassThroughType<HTMLAttributes<HTMLTableCellElement>>	Used to pass attributes to the root's DOM element.

DataTableTBody#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableTBodyInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableTBodyInstance) => string)`	—
The class name to apply to the component.
`as`	`ReactNode`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableTBodyInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableTBodyPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableTBodyInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`ReactNode` \| `((instance: BaseInstance<SafeRecord<DataTableTBodyProps>, unknown, HTMLElement> & { props: SafeRecord<SafeRecord<DataTableTBodyProps>>; attrs: Omit<SafeRecord<SafeRecord<DataTableTBodyProps>>, string` \| `number` \| `symbol> & Record<PropertyKey, unknown> } & { state: SafeRecord; $computedSetup: SafeRecord } & DataTableTBodyExposes & Record<PropertyKey, unknown> & useComponentPTReturnType & useComponentStyleReturnType & DataTableTBodyItemOptions) => ReactNode)`	—
Render function called for each item in the data array. Receives the component instance enriched with item, index, and groupMeta.
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of DataTableTBody component.

label	type	description
root	DataTableTBodyPassThroughType<HTMLAttributes<HTMLTableSectionElement>>	Used to pass attributes to the root's DOM element.

DataTableFrozenTBody#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableFrozenTBodyInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableFrozenTBodyInstance) => string)`	—
The class name to apply to the component.
`as`	`ReactNode`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableFrozenTBodyInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableFrozenTBodyPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableFrozenTBodyInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`ReactNode`	—
Frozen rows that the consumer wants pinned at the top of the scroll viewport.
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of DataTableFrozenTBody component.

label	type	description
root	DataTableFrozenTBodyPassThroughType<HTMLAttributes<HTMLTableSectionElement>>	Used to pass attributes to the root's DOM element.

DataTableRow#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableRowInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableRowInstance) => string)`	—
The class name to apply to the component.
`as`	`ReactNode`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableRowInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableRowPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableRowInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`index`	`number`	`undefined`
Zero-based index of the row. Used for `aria-rowindex` , striped-row class, and keyboard navigation tab order. When the row is rendered inside a data-driven `TBody` iteration the index is derived from the context; pass this prop explicitly when rendering rows outside of that flow (for example, when iterating data manually).
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datatable"`
`data-part`	`"row"`
`data-index`	Zero-based row index in the rendered slice
`data-selected`	Present when the row is selected
`aria-selected`	Reflects selection state when selection mode is active
`aria-level`	Tree depth (one-based) in tree mode
`aria-expanded`	Reflects expansion when the row has children
`aria-posinset`	One-based position among siblings (tree mode)
`aria-setsize`	Total siblings at the same depth (tree mode)
`data-drag-source`	Present while dragging this row
`data-dragpoint-top`	Present when drop indicator targets the top edge
`data-dragpoint-bottom`	Present when drop indicator targets the bottom edge

Defines passthrough(pt) options of DataTableRow component.

label	type	description
root	DataTableRowPassThroughType<HTMLAttributes<HTMLTableRowElement>>	Used to pass attributes to the root's DOM element.

DataTableCell#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableCellInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableCellInstance) => string)`	—
The class name to apply to the component.
`as`	`ReactNode`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableCellInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableCellPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableCellInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`colSpan`	`number`	`undefined`
Number of columns a cell should span.
`rowSpan`	`number`	`undefined`
Number of rows a cell should span. Used for rowspan-style row grouping.
`frozen`	`boolean`	`false`
Whether the column is frozen.
`alignFrozen`	`"left"` \| `"right"`	`'left'`
Position of the frozen column, valid values are "left" and "right".
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datatable"`
`data-part`	`"cell"`
`role`	`"gridcell"`
`data-frozen`	Present when the cell is frozen
`data-align-frozen`	`"left"` \| `"right"`
`data-editable-cell`	Present when wrapped by a `CellEditor`

Defines passthrough(pt) options of DataTableCell component.

label	type	description
root	DataTableCellPassThroughType<HTMLAttributes<HTMLTableCellElement>>	Used to pass attributes to the root's DOM element.

DataTableTFoot#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableTFootInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableTFootInstance) => string)`	—
The class name to apply to the component.
`as`	`ReactNode`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableTFootInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableTFootPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableTFootInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of DataTableTFoot component.

label	type	description
root	DataTableTFootPassThroughType<HTMLAttributes<HTMLTableSectionElement>>	Used to pass attributes to the root's DOM element.

DataTableTFootRow#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableTFootRowInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableTFootRowInstance) => string)`	—
The class name to apply to the component.
`as`	`ReactNode`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableTFootRowInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableTFootRowPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableTFootRowInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of DataTableTFootRow component.

label	type	description
root	DataTableTFootRowPassThroughType<HTMLAttributes<HTMLTableRowElement>>	Used to pass attributes to the root's DOM element.

DataTableTFootCell#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableTFootCellInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableTFootCellInstance) => string)`	—
The class name to apply to the component.
`as`	`ReactNode`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableTFootCellInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableTFootCellPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableTFootCellInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`colSpan`	`number`	`undefined`
Number of columns a footer cell should span.
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of DataTableTFootCell component.

label	type	description
root	DataTableTFootCellPassThroughType<HTMLAttributes<HTMLTableCellElement>>	Used to pass attributes to the root's DOM element.

DataTableFooter#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableFooterInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableFooterInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableFooterInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableFooterPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableFooterInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of DataTableFooter component.

label	type	description
root	DataTableFooterPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

DataTableSort#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableSortInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableSortInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableSortInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableSortPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableSortInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`field`	`string`	`undefined`
The field name to sort by when this sort trigger is clicked.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datatable"`
`data-part`	`"sort"`
`role`	`"button"`
`data-sorted`	Present when this column is part of the active sort
`data-unsorted`	Present when this column is not part of the sort
`data-sort-order`	`"asc"` \| `"desc"` when sorted
`aria-sort`	`"ascending"` \| `"descending"` \| `"none"`

Defines passthrough(pt) options of DataTableSort component.

label	type	description
root	DataTableSortPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

DataTableSortIndicator#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableSortIndicatorInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableSortIndicatorInstance) => string)`	—
The class name to apply to the component.
`as`	`ReactNode`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableSortIndicatorInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableSortIndicatorPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableSortIndicatorInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`match`	`"desc"` \| `"always"` \| `"asc"` \| `"unsorted"`	—
Determines the visibility of the indicator based on the sort state. - "asc": Visible when sorted ascending. - "desc": Visible when sorted descending. - "unsorted": Visible when not sorted (useful with removableSort). - "always": Indicator is always visible.
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of DataTableSortIndicator component.

label	type	description
root	DataTableSortIndicatorPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the root's DOM element.

DataTableSortOrder#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableSortOrderInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableSortOrderInstance) => string)`	—
The class name to apply to the component.
`as`	`ReactNode`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableSortOrderInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableSortOrderPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableSortOrderInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

label	type	description
root	DataTableSortOrderPassThroughType<HTMLAttributes<HTMLSpanElement>>

DataTableFilter#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableFilterInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableFilterInstance) => string)`	—
The class name to apply to the component.
`as`	`ReactNode`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableFilterInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableFilterPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableFilterInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`field`	`string`	—
The field name to filter.
`display`	`DataTableFilterDisplay`	`'row'`
Display mode of the filter. 'row' renders inline and applies immediately. 'menu' provides overlay with constraints, operators, apply/clear.
`showOperator`	`boolean`	`true`
Whether to show the AND/OR operator selector in menu mode.
`showMatchModes`	`boolean`	`true`
Whether to show the match mode dropdown.
`showClearButton`	`boolean`	`true`
Whether to show the clear button.
`showApplyButton`	`boolean`	`true`
Whether to show the apply button (menu mode only).
`showAddButton`	`boolean`	`true`
Whether to show the "add constraint" button (menu mode only).
`maxConstraints`	`number`	`2`
Maximum number of constraints per column (menu mode only).
`matchModeOptions`	`DataTableMatchModeOption[]`	—
Custom match mode options. If not provided, defaults based on dataType.
`dataType`	`string`	`'text'`
Data type hint for default match modes. 'text' \| 'numeric' \| 'date' \| 'boolean'
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datatable"`
`data-part`	`"filter"`
`data-display`	`"row"` \| `"menu"`
`data-active`	Present when the column has an active filter

label	type	description
root	DataTableFilterPassThroughType<HTMLAttributes<HTMLDivElement>>

DataTablePagination#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTablePaginationInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTablePaginationInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTablePaginationInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTablePaginationPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTablePaginationInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of DataTablePagination component.

label	type	description
root	DataTablePaginationPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

DataTableSelection#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableSelectionInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableSelectionInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableSelectionInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableSelectionPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableSelectionInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`mode`	`"checkbox"` \| `"radio"` \| `"single"`	—
Override the toggle mode for row selection. - 'radio': select only one row, no deselect on re-click. - 'checkbox': toggle individual rows. - 'single': select one row, deselect on re-click. When not set, defaults to 'single' for selectionMode="single" and 'checkbox' for selectionMode="multiple".
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of DataTableSelection component.

label	type	description
root	DataTableSelectionPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

DataTableRowToggle#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableRowToggleInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableRowToggleInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableRowToggleInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableRowTogglePassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableRowToggleInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datatable"`
`data-part`	`"row-toggle"` (button) or `"row-toggle-spacer"`
`data-tree-level`	Zero-based tree depth (tree mode only)
`aria-expanded`	Reflects current expansion state

Defines passthrough(pt) options of DataTableRowToggle component.

label	type	description
root	DataTableRowTogglePassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

DataTableRowToggleIndicator#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableRowToggleIndicatorInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableRowToggleIndicatorInstance) => string)`	—
The class name to apply to the component.
`as`	`ReactNode`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableRowToggleIndicatorInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableRowToggleIndicatorPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableRowToggleIndicatorInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`match`	`"always"` \| `"expanded"` \| `"collapsed"`	—
Determines the visibility of the indicator based on the toggle state. - "expanded": Visible when the row is expanded. - "collapsed": Visible when the row is collapsed. - "always": Indicator is always visible.
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of DataTableRowToggleIndicator component.

label	type	description
root	DataTableRowToggleIndicatorPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the root's DOM element.

DataTableRowExpansion#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableRowExpansionInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableRowExpansionInstance) => string)`	—
The class name to apply to the component.
`as`	`ReactNode`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableRowExpansionInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableRowExpansionPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableRowExpansionInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of DataTableRowExpansion component.

label	type	description
root	DataTableRowExpansionPassThroughType<HTMLAttributes<HTMLTableRowElement>>	Used to pass attributes to the root's DOM element.

DataTableRowGroupHeader / DataTableRowGroupFooter#

<DataTable.RowGroupHeader> and <DataTable.RowGroupFooter> render header / footer rows for grouped data when groupField is set on Root. They forward all props to a <tr> element and render the row only at the start (header) / end (footer) of each group as reported by the headless grouping metadata.

<DataTable.TBody>
    {({ item, index, groupMeta }) => (
        <>
            {groupMeta?.isGroupStart && (
                <DataTable.RowGroupHeader>
                    <DataTable.Cell colSpan={3}>{String(groupMeta.groupValue)}</DataTable.Cell>
                </DataTable.RowGroupHeader>
            )}
            <DataTable.Row>{/* … */}</DataTable.Row>
            {groupMeta?.isGroupEnd && (
                <DataTable.RowGroupFooter>
                    <DataTable.Cell colSpan={3}>Total: {groupMeta.groupCount}</DataTable.Cell>
                </DataTable.RowGroupFooter>
            )}
        </>
    )}
</DataTable.TBody>

DataTableCellEditor#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableCellEditorInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableCellEditorInstance) => string)`	—
The class name to apply to the component.
`as`	`ReactNode`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableCellEditorInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableCellEditorPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableCellEditorInstance) => ReactNode`	—
The render function to render the component with instance access.
`field`	`string`	—
Field name associated with this cell.
`rowIndex`	`number`	—
Row index of this cell.
`rowData`	`Record<string, unknown>`	—
Row data associated with this cell.
`children`	`ReactNode`	—
CellEditorDisplay and CellEditorContent sub-components.
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datatable"`
`data-part`	`"cell-editor"`
`data-row-index`	The row index (used by Tab traversal)
`data-field`	The field name (used by Tab traversal)
`data-row-key`	The row key (used to track edits across sort)
`data-editing`	Present while the cell is in edit mode

Defines passthrough(pt) options of DataTableCellEditor component.

label	type	description
root	DataTableCellEditorPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

DataTableCellEditorDisplay#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableCellEditorDisplayInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableCellEditorDisplayInstance) => string)`	—
The class name to apply to the component.
`as`	`ReactNode`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableCellEditorDisplayInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableCellEditorDisplayPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableCellEditorDisplayInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

label	type	description
root	DataTableCellEditorDisplayPassThroughType<HTMLAttributes<HTMLDivElement>>

DataTableCellEditorContent#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableCellEditorContentInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableCellEditorContentInstance) => string)`	—
The class name to apply to the component.
`as`	`ReactNode`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableCellEditorContentInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableCellEditorContentPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableCellEditorContentInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

label	type	description
root	DataTableCellEditorContentPassThroughType<HTMLAttributes<HTMLDivElement>>

DataTableRowEditor#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableRowEditorInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableRowEditorInstance) => string)`	—
The class name to apply to the component.
`as`	`ReactNode`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableRowEditorInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableRowEditorPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableRowEditorInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`rowKey`	`string` \| `number`	—
Row key used for editing state tracking.
`rowData`	`Record<string, unknown>`	—
The row data — forwarded to `onRowEditInit` / `onRowEditSave` / `onRowEditCancel` events so the handler can identify the affected row without a separate lookup.
`rowIndex`	`number`	—
Flat row index — forwarded to row edit events when available.
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of DataTableRowEditor component.

label	type	description
root	DataTableRowEditorPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

DataTableRowEditorInit#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableRowEditorInitInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableRowEditorInitInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableRowEditorInitInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableRowEditorInitPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableRowEditorInitInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

label	type	description
root	DataTableRowEditorInitPassThroughType<ButtonHTMLAttributes<HTMLButtonElement>>

DataTableRowEditorSave#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableRowEditorSaveInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableRowEditorSaveInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableRowEditorSaveInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableRowEditorSavePassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableRowEditorSaveInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

label	type	description
root	DataTableRowEditorSavePassThroughType<ButtonHTMLAttributes<HTMLButtonElement>>

DataTableRowEditorCancel#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableRowEditorCancelInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableRowEditorCancelInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableRowEditorCancelInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableRowEditorCancelPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableRowEditorCancelInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

label	type	description
root	DataTableRowEditorCancelPassThroughType<ButtonHTMLAttributes<HTMLButtonElement>>

DataTableColumnToggle#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableColumnToggleInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableColumnToggleInstance) => string)`	—
The class name to apply to the component.
`as`	`ReactNode`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableColumnToggleInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableColumnTogglePassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableColumnToggleInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`columns`	`DataTableColumnToggleColumn[]`	—
Available columns that can be toggled.
`visibleFields`	`string[]`	—
Currently visible column fields.
`defaultVisibleFields`	`string[]`	—
Default visible column fields for uncontrolled mode.
`onVisibleFieldsChange`	`(event: { originalEvent: SyntheticEvent; visibleFields: string[] }) => void`	—
Callback when column visibility changes.
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

label	type	description
root	DataTableColumnTogglePassThroughType<HTMLAttributes<HTMLDivElement>>

DataTableColumnReorder#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableColumnReorderInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableColumnReorderInstance) => string)`	—
The class name to apply to the component.
`as`	`ReactNode`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableColumnReorderInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableColumnReorderPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableColumnReorderInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`columnIndex`	`number`	—
Index of the column for reordering. Not required — the surrounding `<th>` is the actual drag source and drop target; this handle only hints draggability visually. Kept for backward compatibility and potential fine-grained control.
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of DataTableColumnReorder component.

label	type	description
root	DataTableColumnReorderPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the root's DOM element.

DataTableColumnReorderTarget#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableColumnReorderTargetInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableColumnReorderTargetInstance) => string)`	—
The class name to apply to the component.
`as`	`ReactNode`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableColumnReorderTargetInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableColumnReorderTargetPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableColumnReorderTargetInstance) => ReactNode`	—
The render function to render the component with instance access.
`index`	`number`	—
Column index for this target. When omitted, the index is resolved from the nearest ancestor `<th>` 's sibling position. Provide explicitly only when the DOM structure makes sibling-based resolution unreliable (e.g., portaled headers).
`children`	`ReactNode` \| `((state: DataTableColumnReorderTargetRenderState) => ReactNode)`	—
Content rendered inside the target. Accepts a render-prop form `(state) => ReactNode` for state-aware rendering.
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

label	type	description
root	DataTableColumnReorderTargetPassThroughType<HTMLAttributes<HTMLDivElement>>

DataTableColumnResizer#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableColumnResizerInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableColumnResizerInstance) => string)`	—
The class name to apply to the component.
`as`	`ReactNode`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableColumnResizerInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableColumnResizerPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableColumnResizerInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`columnIndex`	`number`	—
Index of the column to resize. When omitted, it is derived from the parent `<th>` `cellIndex` .
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of DataTableColumnResizer component.

label	type	description
root	DataTableColumnResizerPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the root's DOM element.

DataTableColumnResizeIndicator#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableColumnResizeIndicatorInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableColumnResizeIndicatorInstance) => string)`	—
The class name to apply to the component.
`as`	`ReactNode`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableColumnResizeIndicatorInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableColumnResizeIndicatorPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableColumnResizeIndicatorInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of DataTableColumnResizeIndicator component.

label	type	description
root	DataTableColumnResizeIndicatorPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

DataTableRowReorder#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableRowReorderInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableRowReorderInstance) => string)`	—
The class name to apply to the component.
`as`	`ReactNode`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableRowReorderInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableRowReorderPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableRowReorderInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`rowIndex`	`number`	—
Index of the row for reordering.
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

label	type	description
root	DataTableRowReorderPassThroughType<HTMLAttributes<HTMLSpanElement>>

DataTableExport#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableExportInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableExportInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableExportInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableExportPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableExportInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`selectionOnly`	`boolean`	—
Only export selected rows.
`fields`	`string[]`	—
Fields to export. If not provided, all fields from first row are used.
`headers`	`Record<string, string>`	—
Column headers for export (maps field to header label).
`separator`	`string`	`','`
CSV separator character.
`fileName`	`string`	`'download'`
File name for download (without extension).
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

label	type	description
root	DataTableExportPassThroughType<HTMLAttributes<HTMLButtonElement>>

DataTableLoading#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableLoadingInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableLoadingInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableLoadingInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableLoadingPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableLoadingInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of DataTableLoading component.

label	type	description
root	DataTableLoadingPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

DataTableEmptyTBody#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DataTableEmptyTBodyInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DataTableEmptyTBodyInstance) => string)`	—
The class name to apply to the component.
`as`	`ReactNode`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DataTableEmptyTBodyInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DataTableEmptyTBodyPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DataTableEmptyTBodyInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of DataTableEmptyTBody component.

label	type	description
root	DataTableEmptyTBodyPassThroughType<HTMLAttributes<HTMLTableSectionElement>>	Used to pass attributes to the root's DOM element.

Accessibility#

DataTable.Table applies role="table" for flat data and role="treegrid" when treeMode is enabled. Each row exposes role="row" plus aria-rowindex (1-based) and, in tree mode, aria-level, aria-expanded, aria-posinset, and aria-setsize. Cells use role="gridcell". Sort triggers expose role="button", aria-sort, and a descriptive aria-label. Selection wrappers forward checkbox/radio semantics from the underlying input. Provide an accessible name on Root via aria-label or aria-labelledby when the table has no visible heading.

Keyboard Support#

Key	Function
`tab`	Moves focus through interactive elements (sort triggers, filter inputs, rows).
`arrow up` / `arrow down`	Moves focus between rows when a row is focused.
`shift + arrow up` / `arrow down`	Extends row selection while moving focus.
`arrow left`	In tree mode, collapses the focused row, or moves focus to its parent if already collapsed.
`arrow right`	In tree mode, expands the focused row, or moves focus to its first child if already expanded.
`home` / `end`	Moves focus to the first / last row.
`space`	Toggles selection on the focused row.
`enter`	Toggles selection on the focused row, or opens the first editable cell in `cell` edit mode.
`escape`	Cancels the active cell edit and returns focus to the row.
`tab` (in cell edit)	Commits the edit and moves to the next editable cell, wrapping across rows.
`shift + tab` (in cell edit)	Commits the edit and moves to the previous editable cell.
`enter` (in cell edit)	Commits the edit and stays in place.