Table

Primitive components to build data tables.

Table

Prop	Required	Description	Type
`children`	✅	React children containing TableRow components.	string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| ReactPortal \| { key?: string \| number; ref?: null; props?: { children?: boolean \| ReactChild \| ReactPortal \| StrictReactFragment; }; } \| (boolean \| ReactChild \| ReactPortal \| StrictReactFragment)[]
`truncate`	—	Force text content to a single line with text-ellipsis truncation. Defaults to false.	boolean
`horizontalAlign`	—	Horizontal alignment: left, middle or right. Defaults to left.	"left" \| "right" \| "middle"
`verticalAlign`	—	Vertical alignment: top, middle or bottom. Defaults to middle.	"middle" \| "top" \| "bottom"
`divider`	—	Column setting to show a border on the right-hand side of the cell. Defaults to false.	boolean
`density`	—	Controls the padding of cells: 'slim', 'regular' or 'spacious'. Defaults to regular.	"slim" \| "regular" \| "spacious"
`tableBorder`	—	Show a border around the table.	boolean
`block`	—	@deprecated use fillContainer instead. This prop will be removed in a future major update. Makes the Table fill its container. Defaults to true.	boolean
`fillContainer`	—	Makes the Table fill its container. Defaults to true.	boolean
`width`	—	Set the width of the table.	string
`maxWidth`	—	Set the max-width of the table.	string
`minWidth`	—	Set the min-width of the table.	string
`columnSettings`	—	Column settings using columnName as the key for each setting group.	ColumnSettingsMap
`ariaLabel`	—	When the context of the table isn't clear, a label must be provided to give screen readers context on the table contents.	string
`ariaRowCount`	—	If only a subset of rows are shown due to paging or virtualisation, the total row count must be provided for screen readers.	number
`stickyHeader`	—	Set the table header cells to be sticky to the top. Only works if setting a maxHeight in conjunction.	boolean
`maxHeight`	—	Set a max-height on the table. Overflowing content will scroll on x-axis.	string \| numberSupports responsive prop syntax
`selectType`	—	Set a select type to make rows selectable. NOTE: Has to be used in conjunction with selectedValues and onSelectedValuesChange, along with selectValue on the TableRow component.	"checkbox" \| "radio"
`selectedValues`	—	Pass in state of the currently selected values when implementing selectable rows. NOTE: Has to be used in conjunction with selectType and onSelectedValuesChange, along with selectValue on the TableRow component.	string[]
`onSelectedValuesChange`	—	Pass in a state handler to update selectedValues when implementing selectable rows. NOTE: Has to be used in conjunction with selectType and selectedValues, along with selectValue on the TableRow component.	(selectedValues: string[]) => void

TableRow

Prop	Required	Description	Type
`children`	✅	React children containing TableCell or TableHeaderCell components.	string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| ReactPortal \| { key?: string \| number; ref?: null; props?: { children?: boolean \| ReactChild \| ReactPortal \| StrictReactFragment; }; } \| (boolean \| ReactChild \| ReactPortal \| StrictReactFragment)[]
`ariaRowIndex`	—	If only a subset of rows are shown due to paging or virtualisation, the row's index must be provided for screen readers.	number
`selectDisabled`	—	Disable the select control (checkbox/radio) when using selectType on the Table component.	boolean
`selectValue`	—	Assign a value to the TableRow's checkbox/radio when using a Table with selectType.	string
`selectLabel`	—	Provide an accessible label for the TableRow's checkbox/radio when using a Table with selectType.	string
`selectAll`	—	The checked state of the "Select all" checkbox; true, false or "indeterminate".	false \| true \| "indeterminate"
`onSelectAllChange`	—	Callback to run when the table header's "Select all" checkbox is clicked.	() => void
`onClick`	—	Receive a onClick function to the table tr click event handler, we do not allow row selectable and clickable happening together.	(e: UIEvent<HTMLElement, UIEvent>) => void

TableHeaderCell

Prop	Required	Description	Type
`children`	✅	React children containing cell content. Can be text or other components.	string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| ReactPortal \| { key?: string \| number; ref?: null; props?: { children?: boolean \| ReactChild \| ReactPortal \| StrictReactFragment; }; } \| (boolean \| ReactChild \| ReactPortal \| StrictReactFragment)[]
`truncate`	—	Force text content to a single line with text-ellipsis truncation. Defaults to false.	boolean
`horizontalAlign`	—	Horizontal alignment: left, middle or right. Defaults to left.	"middle" \| "left" \| "right"
`verticalAlign`	—	Vertical alignment: top, middle or bottom. Defaults to middle.	"top" \| "middle" \| "bottom"
`divider`	—	Column setting to show a border on the right-hand side of the cell. Defaults to false.	boolean
`sticky`	—	Make the column sticky on horizontal scroll.	boolean
`width`	—	Set the width of the column.	string
`colSpan`	—	How many columns the cell extends.	string \| number
`columnName`	—	The column's name. Required when setting column settings or using sort functionality.	string
`stopPropagation`	—	If this TableCell has an onClick event and needs to prevent the event from propagating to the parent.	boolean
`onSort`	—	The onSort callback enables uncontrolled sorting on a column. Columns must have the columnName prop provided when sorting is enabled.	(columnName: string, sortDirection: SortDirection) => void
`onSortChange`	—	The onSortChange callback enables controlled sorting on a column. Must be used together with the sort prop. Columns must have the columnName prop provided when sorting is enabled.	({ columnName, sortDirection }: ColumnSort) => void
`sort`	—	The sort value of a column. Must be used together with the onSortChange prop. Columns must have the columnName prop provided when sorting is enabled.	ColumnSort

TableCell

Prop	Required	Description	Type
`children`	✅	React children containing cell content. Can be text or other components.	string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| ReactPortal \| { key?: string \| number; ref?: null; props?: { children?: boolean \| ReactChild \| ReactPortal \| StrictReactFragment; }; } \| (boolean \| ReactChild \| ReactPortal \| StrictReactFragment)[]
`truncate`	—	Force text content to a single line with text-ellipsis truncation. Defaults to false.	boolean
`horizontalAlign`	—	Horizontal alignment: left, middle or right. Defaults to left.	"left" \| "right" \| "middle"
`verticalAlign`	—	Vertical alignment: top, middle or bottom. Defaults to middle.	"middle" \| "top" \| "bottom"
`divider`	—	Column setting to show a border on the right-hand side of the cell. Defaults to false.	boolean
`sticky`	—	Make the column sticky on horizontal scroll.	boolean
`width`	—	Set the width of the column.	string
`colSpan`	—	How many columns the cell extends.	string \| number
`rowSpan`	—	How many rows the cell extends.	string \| number
`columnName`	—	The column's name. Required when setting column settings or using sort functionality.	string
`stopPropagation`	—	If this TableCell has an onClick event and needs to prevent the event from propagating to the parent.	boolean