Table

Composable table primitives for building data tables that fit your application constraints.

TableProps

Prop	Type	Required	Default	Description
`'aria-colcount'`	`number`	—	—	When only a subset of columns are present, use the aria-colcount attribute to let assistive technologies know how many columns the table would have if all columns were present.
`'aria-describedby'`	`string`	—	—	Provide the ID of an element that describes the table.
`'aria-rowcount'`	`number`	—	—	When only a subset of rows are loaded, for virtualized or paginated results, use the aria-rowcount attribute to let assistive technologies know how many rows the table would have if all rows were present.
`alignY`	`CellAlignY` `top`\|`center`\|`bottom`	—	`center`	Sets the vertical alignment for content within each cell.
`children`	`ReactNode`	Yes	—	The elements that make up the table.
`density`	`CellDensity` `compact`\|`regular`\|`spacious`	—	`regular`	Sets the amount of vertical padding within each cell.
`overflowStrategy`	`CellOverflowStrategy` `wrap`\|`truncate`	—	`truncate`	Sets the overflow behavior for the text content of each cell.
Also accepts `LabelProps`

TableCellProps

Prop	Type	Required	Default	Description
`'aria-colindex'`	`number`	—	—	When only a subset of columns are present, use the aria-colindex attribute to let assistive technologies know what portions of the content are being displayed, and that all the table's content is not present.
`'aria-colspan'`	`number`	—	—	The aria-colspan attribute defines the number of columns spanned by an individual cell. The value should be a positive integer.
`'aria-rowspan'`	`number`	—	—	The aria-rowspan attribute defines the number of rows spanned by an individual cell. The value should be a positive integer.
`align`	`CellAlign` `left`\|`center`\|`right`	—	`left`	Sets the horizontal alignment of cell contents.
`alignY`	`top`\|`bottom`\|`center`	—	`center`	Sets the vertical alignment for content within each cell.
`children`	`ReactNode`	Yes	—	The contents of the cell.
`flex`	`number`	—	—	Shares spare width between cells in proportion to this number - seed it with the column's intended pixel width. Takes precedence over `width`, as AG Grid's `flex` does.
`id`	`string`	—	—	Optionally provide an ID.
`maxWidth`	`number \| string`	—	—	Sets the maximum width of the cell.
`minWidth`	`number \| string`	—	—	Sets the minimum width of the cell.
`role`	`gridcell`\|`rowheader`\|`columnheader`	—	`gridcell`	The role of the cell.
`showDivider`	`boolean`	—	`stickyOffset !== undefined`	Whether the cell should render a divider between it and the next cell.
`stickyEdge`	`left`\|`right`	—	—	Which edge the cell sticks to. Defaults to the sign of `stickyOffset`.
`stickyOffset`	`number`	—	—	Applies "sticky" positioning to the cell, offset relative to its nearest scrolling ancestor. The edge defaults to the sign of the value — negative offsets stick to the right — but prefer `stickyEdge` to say so outright. `-0` cannot express a right edge: build pipelines constant-fold it to `0`, silently turning the cell back into a left-sticky one.
`UNSAFE_style`	`CSSProperties`	—	—	Sets the inline [style](https://reactjs.org/docs/dom-elements.html#style) for the element. Only use as a last resort.
`width`	`number \| string`	—	—	Sets the width of the cell.

TableColumnHeaderProps

Prop	Type	Required	Default	Description
`'aria-sort'`	`SortDirection` `ascending`\|`descending`	—	—	The aria-sort attribute indicates if items in a table or grid are sorted in ascending or descending order.
`align`	`CellAlign` `left`\|`center`\|`right`	—	`left`	Sets the horizontal alignment of cell contents.
`alignY`	`top`\|`bottom`\|`center`	—	`center`	Sets the vertical alignment for content within each cell.
`flex`	`number`	—	—	Shares spare width between cells in proportion to this number - seed it with the column's intended pixel width. Takes precedence over `width`, as AG Grid's `flex` does.
`maxWidth`	`number \| string`	—	—	Sets the maximum width of the cell.
`minWidth`	`number \| string`	—	—	Sets the minimum width of the cell.
`onClick`	`() => void`	—	—	The callback to run when a user clicks the column header. Typically reserved for sort behaviour.
`showDivider`	`boolean`	—	`stickyOffset !== undefined`	Whether the cell should render a divider between it and the next cell.
`stickyEdge`	`left`\|`right`	—	—	Which edge the cell sticks to. Defaults to the sign of `stickyOffset`.
`stickyOffset`	`number`	—	—	Applies "sticky" positioning to the cell, offset relative to its nearest scrolling ancestor. The edge defaults to the sign of the value — negative offsets stick to the right — but prefer `stickyEdge` to say so outright. `-0` cannot express a right edge: build pipelines constant-fold it to `0`, silently turning the cell back into a left-sticky one.
`tooltip`	`Pick<TooltipProps, 'content'>['content']`	—	—	—
`UNSAFE_style`	`CSSProperties`	—	—	Sets the inline [style](https://reactjs.org/docs/dom-elements.html#style) for the element. Only use as a last resort.
`width`	`number \| string`	—	—	Sets the width of the cell.
Also accepts `Omit<TableCellProps, 'role'>`

TableBodyProps

Prop	Type	Required	Default	Description
`children`	`ReactNode`	Yes	—	The elements that make up the table body.
`UNSAFE_style`	`CSSProperties`	—	—	Sets inline [style](https://reactjs.org/docs/dom-elements.html#style) for the element. Only use as a last resort.

TableFootProps

Prop	Type	Required	Default	Description
`children`	`ReactNode`	Yes	—	The elements that make up the table footer.
`stickyOffset`	`number`	—	—	—
`UNSAFE_style`	`CSSProperties`	—	—	Sets inline [style](https://reactjs.org/docs/dom-elements.html#style) for the element. Only use as a last resort. Use style props instead.

TableHeadProps

Prop	Type	Required	Default	Description
`children`	`ReactNode`	Yes	—	The elements that make up the table header.
`stickyOffset`	`number`	—	—	—

TableGroupProps

Prop	Type	Required	Default	Description
`children`	`ReactNode`	Yes	—	—
`header`	`(props: { expanded: boolean; triggerProps: TriggerProps; }) => ReactElement`	Yes	—	—
`initialExpanded`	`boolean`	—	`true`	—
`UNSAFE_style`	`CSSProperties`	—	—	Sets inline [style](https://reactjs.org/docs/dom-elements.html#style) for the element. Only use as a last resort.

TableGroupHeaderProps

Prop	Type	Required	Default	Description
`'aria-colspan'`	`number`	—	—	—
`children`	`ReactNode`	Yes	—	—
`UNSAFE_style`	`CSSProperties`	—	—	Sets inline [style](https://reactjs.org/docs/dom-elements.html#style) for the element. Only use as a last resort.

TableRowProps

Prop	Type	Required	Default	Description
`'aria-rowindex'`	`number`	—	—	When only a subset of rows are loaded, for virtualization or pagination, use the aria-rowindex attribute to let assistive technologies know what portions of the content are being displayed, and that all the table's content is not present.
`'aria-selected'`	`boolean`	—	—	—
`alignY`	`top`\|`center`\|`bottom`	—	`center`	For vertical alignemtn of all cell content in this row.
`children`	`ReactNode`	Yes	—	The elements that make up the table row.
`disabled`	`boolean`	—	—	—
`status`	`'dragging'`	—	—	Sets the interaction status.
`tone`	`critical`\|`positive`\|`cautious`	—	—	Sets the background colour for the row.
`UNSAFE_style`	`CSSProperties`	—	—	Sets inline [style](https://reactjs.org/docs/dom-elements.html#style) for the element. Only use as a last resort.

TableSelectionCellProps

Prop	Type	Required	Default	Description
`'aria-label'`	`string`	Yes	—	—
Also accepts `Pick< TableCellProps, \| 'aria-colindex' \| 'id' \| 'role' \| 'showDivider' \| 'stickyEdge' \| 'stickyOffset' >`, `Pick<CheckboxPrimitiveProps, Keys<typeof validCheckboxKeys>>`

Table — Guidelines

The design rationale behind Table's primitive-based composition, and when to reach for table groups.

Breadcrumbs

BreadCrumbs.Item, BreadCrumbs.TextItem and BreadCrumbs.Button can be used inside BreadCrumbs to render a set of bread crumbs.