Data Table
Present sortable, selectable tabular data with semantic table markup.
Example
| John Doe | john@example.com | Admin | |
| Jane Smith | jane@example.com | User | |
| Bob Johnson | bob@example.com | User |
API reference
DataTableProps<T>
dataT[]—
Name: data
Description: Rows rendered in the table body.
Type: T[]
Default: —
columnsDataTableColumn<T>[]—
Name: columns
Description: Column definitions, with optional render and sort metadata.
Type: DataTableColumn<T>[]
Default: —
getRowId(row: T) => string—
Name: getRowId
Description: Returns unique ID for each row.
Type: (row: T) => string
Default: —
selectablebooleanfalse
Name: selectable
Description: Enables row selection checkbox column.
Type: boolean
Default: false
selectedRowsstring[][]
Name: selectedRows
Description: Controlled selected row IDs.
Type: string[]
Default: []
onSelectionChange(selectedIds: string[]) => void—
Name: onSelectionChange
Description: Called when row selection changes.
Type: (selectedIds: string[]) => void
Default: —
sortConfig{ column: string; direction: 'asc' | 'desc' }—
Name: sortConfig
Description: Current sort state for sortable headers.
Type: { column: string; direction: 'asc' | 'desc' }
Default: —
onSortChange(column: string, direction: 'asc' | 'desc') => void—
Name: onSortChange
Description: Sort callback when user activates sortable header.
Type: (column: string, direction: 'asc' | 'desc') => void
Default: —
captionstring—
Name: caption
Description: Accessible table caption/label.
Type: string
Default: —
Accessibility
- WCAG 1.3.1 Info and Relationships: Semantic table structure
- WCAG 2.1.1 Keyboard: Arrow keys, Home/End navigation
- WCAG 4.1.2 Name, Role, Value: Proper ARIA attributes
- WCAG 4.1.3 Status Messages: Sort announcements