Data Table

Tables make it easier for users to compare and analyse data. Data tables organize information with logical relationships and two-dimensional data structures from a data set into a grid with two axis. An example of two-dimensional data is a table of flight costs, each row represents an airline, and each column represents a destination. 

On this page

Import

Default DataTable

Loading preview
Open in Storybook

Actionable DataTable

Loading preview
Open in Storybook

Checkable DataTable

Loading preview
Open in Storybook

Expandable DataTable

Loading preview
Open in Storybook

Checkable Expandable DataTable

Loading preview
Open in Storybook

Props

Data Table Props

NameDescriptionDefault
id*

Unique identifier for the table.

string		-
borders

Enable/disable borders (all, columns, rows)

"rows" | "columns" | "none" | "all"		-
zebraStripes

Enable/disable zebra striping for rows or columns

"rows" | "columns" | "none"		-
density

Change padding density of the cells

"default" | "compact"		-
isExpandable

Indicates whether the table is expandable.

boolean		-
onExpandRowClick

Callback function when a row expands or collapses.

((id: string) => void)		-
isSortable

Indicates whether the table is sortable.

boolean		-
sortById

The column identifier currently sorted by.

string		-
sortDirection

The direction of the current sort.

"none" | "ascending" | "descending"		-
onSortClick

Callback function when a column header is clicked to sort.

((event: MouseEvent<Element, MouseEvent>, id: string, colIndex: number) => void)		-
isSelectAllVisible

Indicates whether the 'Select All' checkbox is visbile

boolean		true
selectAllCheckboxProps

Props to be passed to the 'Select All' checkbox

Omit<CheckboxIndeterminateProps, "id" | "label" | "aria-controls" | "onClick">		-
actionSlot

Contents of action slot above the table.

ReactNode		-
tableLayout

CSS property sets the algorithm used to lay out

cells, rows, and columns

"auto" | "fixed"
auto
labelOverrides

Overrides for labels that have been defaulted in the component.

DataTableLabelOverrides		-
isCheckable

Indicates whether the table rows are checkable.

boolean		-
checkableTableLegend

Checkbox group legend for the datatable. Indicates the group label.

string		-
onIsCheckedChange

Callback function when a row checkbox changes state.

((isChecked: boolean, id: string) => void)		-
onSelectAllCheckChange

Callback function when the Select All checkbox changes state. Callback function when the Select All checkbox is clicked.

((checked: boolean) => void)		-

Data Table Head Props

NameDescriptionDefault
caption

Provides the title for the table.

string		-
colGroupSlot

Allows for representing multiple columns with a single header.

ReactNode		-

Data Table Head Cell Props

NameDescriptionDefault
isActionable

Indicates whether the column is actionable.

boolean		-
align

Align the content of the cell

"center" | "left" | "right"		-
width

Specifies the table head cell's width (and corresponding column) when using a fixed table layout,

string		-
labelOverrides

Overrides for labels that have been defaulted in the component.

DataTableLabelOverrides		-
colIndex

The aria-colindex of the column. Use if not all columns are displayed at once.

number		-
isSortable

Indicates whether the column is sortable.

boolean		-
buttonProps

Props spread onto the sortable button

ButtonBaseProps		-

Data Table Cell Props

NameDescriptionDefault
colIndex

The aria-colindex of the column. Use if not all columns are displayed at once.

number		-
align

Align the content of the cell

"center" | "left" | "right"		-

Data Table Row Props

NameDescriptionDefault
checkboxScreenReaderLabel

The label for the row checkbox.

string		-
isChecked

Indicates whether the row checkbox is checked.

boolean		-
id

Unique identifier for the row.

string		-
onIsCheckedChange

Callback function when the row checkbox changes state.

((isChecked: boolean, id: string) => void)		-
isExpanded

Indicates whether the row is expanded.

boolean		-
defaultIsExpanded

Default state of the expandable row.

boolean		-
expandableButtonScreenReaderLabel

Label for the expandable button.

string		-
checkboxProps

Props spread onto the checkbox

Omit<CheckboxProps, "label" | "defaultChecked" | "id" | "onChange" | "checked">		-
expandableButtonProps

Props spread onto the expandable button

IconButtonOtherProps		-
rowIndex

The aria-rowindex of the row. Use if not all rows are displayed at once.

number		-

Questions?

Connect with the DLS Team on Slack or by email.

Resources

Check out additional resources.