Table

ReactProps

Props

API reference for Table. For usage examples, see the React tab.

Table.Root

Name	Type	Default
children	ReactNode	—
The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows.
compact	boolean	false
Whether the table uses compact sizing
defaultExpandedKeys	Iterable<Key>	—
The initial expanded keys in the collection (uncontrolled).
disabledBehavior	DisabledBehavior	'all'
Whether disabledKeys applies to all interactions, or only selection.
disabledKeys	Iterable<Key>	—
A list of row keys to disable.
disallowEmptySelection	boolean	—
Whether the collection allows empty selection.
dragAndDropHooks	DragAndDropHooks	—
The drag and drop hooks returned by useDragAndDrop used to enable drag and drop behavior for the Table.
escapeKeyBehavior	"clearSelection" | "none"	'clearSelection'
Whether pressing the escape key should clear selection in the table or not. Most experiences should not modify this option as it eliminates a keyboard user's ability to easily clear selection. Only use if the escape key is being handled externally or should not trigger selection clearing contextually.
expandedKeys	Iterable<Key>	—
The currently expanded keys in the collection (controlled).
keyboardNavigationBehavior	"arrow" | "tab"	'arrow'
Whether keyboard navigation to focusable elements within the cells is via the left/right arrow keys or the tab key.
selectionBehavior	SelectionBehavior	'toggle'
How multiple selection should behave in the collection.
selectionMode	SelectionMode	—
The type of selection that is allowed in the collection.
shouldSelectOnPressUp	boolean	—
Whether selection should occur on press up instead of press down.
sortDescriptor	SortDescriptor	—
The current sorted column and direction.
treeColumn	Key	—
The id of the column that displays hierarchical data.
variant	"default" | "striped"	"default"
Visual style variant of the table

Accessibility (4)(4 props)

Advanced (8)(8 props)

Events (68)(68 props)

Forms (2)(2 props)

Styling (2)(2 props)

Table.Body

Name	Type	Default
children	((item: T) => ReactNode) | ReactNode	—
The contents of the collection.
dependencies	readonly any[]	—
Values that should invalidate the item cache when using dynamic collections.
items	Iterable<T>	—
Item objects in the collection.
renderEmptyState	((props: TableBodyRenderProps) => ReactNode)	—
Provides content to display when there are no rows in the table.

Advanced (7)(7 props)

Events (64)(64 props)

Styling (2)(2 props)

Table.Cell

Name	Type	Default
alignment	"center" | "end" | "start"	"start"
The text alignment of the cell's content
allowsArrowNavigation	boolean	—
Whether the cell should support arrow key navigation even when the containing table uses tab keyboard navigation. Allows users to navigate between cells and rows with arrow keys while focus is on an interactive child element within the cell.
children	ChildrenOrFunction<CellRenderProps>	—
The children of the component. A function may be provided to alter the children based on component state.
colSpan	number	—
Indicates how many columns the data cell spans.
focusMode	"cell" | "child"	—
Whether the cell or its first focusable child element should be focused when the cell is focused. Defaults to 'child' in arrow keyboard navigation mode and 'cell' in tab keyboard navigation mode.
textValue	string	—
A string representation of the cell's contents, used for features like typeahead.

Accessibility (1)(1 prop)

Advanced (7)(7 props)

Events (64)(64 props)

Styling (2)(2 props)

Table.Column

Name	Type	Default
alignment	"center" | "end" | "start"	"start"
The text alignment of the columns's text content
allowsArrowNavigation	boolean	—
Whether the column should support arrow key navigation even when the containing table uses tab keyboard navigation. Allows users to navigate between columns and rows with arrow keys while focus is on an interactive child element within the column header.
allowsSorting	boolean	—
Whether the column allows sorting.
children	ChildrenOrFunction<ColumnRenderProps>	—
The children of the component. A function may be provided to alter the children based on component state.
defaultWidth	ColumnSize | null	—
The default width of the column. This prop only applies when the <Table> is wrapped in a <ResizableTableContainer>.
focusMode	"cell" | "child"	—
Whether the column header or its first focusable child element should be focused when the column header is focused. Defaults to 'child' in arrow keyboard navigation mode and 'cell' in tab keyboard navigation mode.
isRowHeader	boolean	—
Whether a column is a row header (opens in new tab) and should be announced by assistive technology during row navigation.
maxWidth	ColumnStaticSize | null	—
The maximum width of the column. This prop only applies when the <Table> is wrapped in a <ResizableTableContainer>.
minWidth	ColumnStaticSize | null	—
The minimum width of the column. This prop only applies when the <Table> is wrapped in a <ResizableTableContainer>.
textValue	string	—
A string representation of the column's contents, used for accessibility announcements.
width	ColumnSize | null	—
The width of the column. This prop only applies when the <Table> is wrapped in a <ResizableTableContainer>.

Accessibility (1)(1 prop)

Advanced (7)(7 props)

Events (64)(64 props)

Styling (2)(2 props)

Table.Footer

Name	Type	Default
children	((item: T) => ReactNode) | ReactNode	—
The contents of the collection.
dependencies	readonly any[]	—
Values that should invalidate the item cache when using dynamic collections.
items	Iterable<T>	—
Item objects in the collection.

Advanced (6)(6 props)

Events (64)(64 props)

Styling (2)(2 props)

Table.Header

Name	Type	Default
children	((item: T) => ReactElement<unknown, string | JSXElementConstructor<any>>) | ReactNode	—
A list of Column(s) or a function. If the latter, a list of columns must be provided using the columns prop.
columns	Iterable<T>	—
A list of table columns.
dependencies	readonly any[]	—
Values that should invalidate the column cache when using dynamic collections.

Advanced (7)(7 props)

Events (67)(67 props)

Styling (2)(2 props)

Table.LoadMoreItem

Name	Type	Default
children	ReactNode	—
The load more spinner to render when loading additional items.
direction	"end" | "start"	'end'
The scroll direction that triggers load more. Use 'start' for reversed layouts where older content loads when scrolling toward the top.
isLoading	boolean	—
Whether or not the loading spinner should be rendered or not.
scrollOffset	number	1
The amount of offset from the bottom of your scrollable region that should trigger load more. Uses a percentage value relative to the scroll body's client height. Load more is then triggered when your current scroll position's distance from the bottom of the currently loaded list of items is less than or equal to the provided value. (e.g. 1 = 100% of the scroll region's height).

Advanced (7)(7 props)

Events (65)(65 props)

Styling (2)(2 props)

Table.Row

Name	Type	Default
children	((item: T) => ReactElement<unknown, string | JSXElementConstructor<any>>) | ReactNode	—
The cells within the row. Supports static items or a function for dynamic rendering.
columns	Iterable<T>	—
A list of columns used when dynamically rendering cells.
dependencies	readonly any[]	—
Values that should invalidate the cell cache when using dynamic collections.
disabledBehavior	DisabledBehavior	—
Whether disabledKeys applies to all interactions, or only selection.
download	string | boolean	—
Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN (opens in new tab).
hasChildItems	boolean	—
Whether this row has children, even if not loaded yet.
href	string	—
A URL to link to. See MDN (opens in new tab).
hrefLang	string	—
Hints at the human language of the linked URL. SeeMDN (opens in new tab).
isDisabled	boolean	—
Whether the row is disabled.
ping	string	—
A space-separated list of URLs to ping when the link is followed. See MDN (opens in new tab).
referrerPolicy	HTMLAttributeReferrerPolicy	—
How much of the referrer to send when following the link. See MDN (opens in new tab).
rel	string	—
The relationship between the linked resource and the current page. See MDN (opens in new tab).
routerOptions	undefined	—
Options for the configured client side router.
target	HTMLAttributeAnchorTarget	—
The target window for the link. See MDN (opens in new tab).
textValue	string	—
A string representation of the row's contents, used for features like typeahead.

Accessibility (1)(1 prop)

Advanced (7)(7 props)

Events (73)(73 props)

Forms (1)(1 prop)

Styling (2)(2 props)

Table.SelectionCell

Name	Type	Default
allowsArrowNavigation	boolean	—
Whether the cell should support arrow key navigation even when the containing table uses tab keyboard navigation. Allows users to navigate between cells and rows with arrow keys while focus is on an interactive child element within the cell.
colSpan	number	—
Indicates how many columns the data cell spans.
focusMode	"cell" | "child"	—
Whether the cell or its first focusable child element should be focused when the cell is focused. Defaults to 'child' in arrow keyboard navigation mode and 'cell' in tab keyboard navigation mode.
textValue	string	—
A string representation of the cell's contents, used for features like typeahead.

Accessibility (1)(1 prop)

Advanced (7)(7 props)

Events (64)(64 props)

Styling (2)(2 props)

Table.SelectionColumn

Name	Type	Default
allowsArrowNavigation	boolean	—
Whether the column should support arrow key navigation even when the containing table uses tab keyboard navigation. Allows users to navigate between columns and rows with arrow keys while focus is on an interactive child element within the column header.
defaultWidth	ColumnSize | null	—
The default width of the column. This prop only applies when the <Table> is wrapped in a <ResizableTableContainer>.
focusMode	"cell" | "child"	—
Whether the column header or its first focusable child element should be focused when the column header is focused. Defaults to 'child' in arrow keyboard navigation mode and 'cell' in tab keyboard navigation mode.
maxWidth	ColumnStaticSize | null	—
The maximum width of the column. This prop only applies when the <Table> is wrapped in a <ResizableTableContainer>.
minWidth	ColumnStaticSize | null	—
The minimum width of the column. This prop only applies when the <Table> is wrapped in a <ResizableTableContainer>.
textValue	string	—
A string representation of the column's contents, used for accessibility announcements.
width	ColumnSize | null	—
The width of the column. This prop only applies when the <Table> is wrapped in a <ResizableTableContainer>.

Accessibility (1)(1 prop)

Advanced (7)(7 props)

Events (64)(64 props)

Styling (2)(2 props)