Data Table

The Data Table component allows for easy display of tabular data with options for sorting and row interaction.

Usage

Default

Data table
			Status
1	Alice	91	Pass
2	Bob	75	Pass
3	Charlie	58	Fail
4	Dana	84	Pass

<DataTable
  data={sampleData}
  columns={sampleColumns}
  theme="primary"
  striped={true}
/>

Props

Data table
	Type	Description
aria-describedby	string	Accessible description reference for the table. Useful for tying helper or instructional text to the table.
aria-label	string	Accessible label for screen readers. Use this when there is no visible caption or heading tied to the table.
aria-labelledby	string	Accessible labelledby reference for the table. Prefer this when a visible heading already labels the table.
caption	string	Optional visible or screen-reader-only caption text for the table. A table caption is the preferred built-in table label.
className	string	Optional class name for the table wrapper.
colCount	number	Total column count override. Helpful when rendering dynamic or grouped columns in advanced cases.
columns	Column<T>[]	Array of column definitions.
data	T[]	Array of row data objects.
data-testid	string	Optional test ID for testing frameworks.
defaultSortKey	keyof T	Default key to sort by on initial render.
defaultSortOrder	"desc" \| "asc"	Default sort order on initial render ('asc' \| 'desc').
emptyMessage	string	Text shown when no rows are available.
getRowAriaDescription	((row: T, index: number) => string)	Optional row description for screen readers. Only used when rows are interactive.
getRowAriaLabel	((row: T, index: number) => string)	Optional accessible label for interactive rows. Only used when onRowClick is provided.
getSortAnnouncement	((column: Column<T>, sortOrder: "asc" \| "desc") => string)	Live region text announced when sorting changes. Receives the active column and current order.
getSortAriaLabel	((column: Column<T>, sortOrder: "asc" \| "desc", isActive: boolean) => string)	Accessible label for the sort buttons/controls. Receives the column label and current sort order.
hideCaption	boolean	Whether the caption should be visually hidden. Useful when you want semantic labeling without visible UI.
loading	boolean	Whether the table is currently loading data.
loadingMessage	string	Accessible and/or visible loading message.
onRowClick	((row: T) => void)	Optional callback when a row is clicked.
onSortChange	((key: keyof T, order: "asc" \| "desc") => void)	Function to handle server-side sorting.
outline	boolean	Whether to use outline styling.
rounding	RoundingType	Rounding style for the table ('none' \| 'small' \| 'medium' \| 'large' \| 'full').
rowCount	number	Total row count override. Helpful for virtualized or server-paginated tables.
rowKey	((row: T) => string \| number)	Function to derive a unique key for each row.
serverSort	boolean	Whether to enable server-side sorting.
shadow	ShadowType	Shadow style for the data table ('none' \| 'light' \| 'medium' \| 'strong' \| 'intense').
state	StateType	State of the table ('success' \| 'error' \| 'warning' \| 'disabled' \| '').
striped	boolean	Whether to use striped row styling.
theme	ThemeType	Theme used for styling the table ('primary' \| 'secondary' \| 'tertiary' \| 'quaternary' \| 'clear').