Data Table

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

Usage

Sortable data table
ID	Name	Score	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}
/>

Sortable data table
Prop	Type	Default	Description
data	Array<{ id: number; name: string; score: number; passed: boolean; }>	-	Array of row data objects to render in the table.
columns	Array<{ key: string; label: string; sortable: boolean; render?: (value: any) => React.ReactNode; }>	-	Array of column definitions describing header, field, and cell rendering.
theme	"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "clear"	Configured Default	Theme variant for the table (primary, secondary, etc.).
state	"" \| "success" \| "error" \| "warning"	-	State style for the table (success, warning, error, or empty).
rounding	"none" \| "small" \| "medium" \| "large"	Configured Default	Rounding style for the table (none, small, medium, large).
shadow	"none" \| "light" \| "medium" \| "strong" \| "intense"	Configured Default	Box shadow style for the table (none, light, medium, strong, intense).
striped	boolean	true	If true, applies alternating row background stripes.
outline	boolean	false	Whether the table uses an outlined style.
onRowClick	(row: { id: number; name: string; score: number; passed: boolean }) => void	-	Callback fired when a row is clicked.
onSortChange	(key: string, order: string) => void	-	Callback fired when sorting changes.
defaultSortKey	keyof T	-	Default key to sort on initial render.
defaultSortOrder	"asc" \| "desc"	"asc"	Default sort order.
serverSort	boolean	false	Enables server-side sorting.
data-testid	string	"dat-table"	Test ID for targeting the component in tests.
className	string	-	Additional CSS class names for the DataTable container.