DataTable
Data displayGeneric table with sorting, multi/single selection, client pagination and first-class loading/error/empty states. Sort and selection support both controlled and uncontrolled modes.
import { DataTable<T> } from "@componentforge/react";
Examples
Sortable columns with optional selection
| ORD-1042 | Amara Okafor | paid | 2026-08-21 | $184.00 | |
| ORD-1043 | Jonas Weber | pending | 2026-08-21 | $72.50 | |
| ORD-1044 | Priya Raghavan | paid | 2026-08-20 | $1,299.00 | |
| ORD-1045 | Tomás Herrera | refunded | 2026-08-19 | $54.00 | |
| ORD-1046 | Mei-Lin Chao | paid | 2026-08-18 | $349.00 |
Page 1 of 3 · 12 rows
Props
Accessibility
- Sortable headers use aria-sort (ascending/descending/none); sort controls are real buttons.
- Row selection checkboxes have generated labels ("Select row p3"); header checkbox reports indeterminate state.
- Loading skeleton rows are aria-hidden and the table sets aria-busy.
Keyboard interactions
| Key | Action |
|---|---|
| Tab | Reach sort buttons and checkboxes in DOM order. |
| Enter / Space | Toggle sort / selection controls. |
API reference
Selected props — every component also spreads native HTML attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | DataTableColumn<T>[] | — | key, header, accessor?, render?, sortable?, align?, width?. |
| rows / rowKey | T[] / (row) => string | — | Data + stable identity. |
| sort / defaultSort / onSortChange | { key, direction } | null | null | Three-state sorting contract. |
| selectionMode / selectedRowKeys… | "none" | "single" | "multiple" | "none" | Set-based selection contract. |
| pagination / onPageChange | { page, pageSize } | — | Client pagination chrome; page stays controlled. |
| loading / error / onRetry / empty* | — | — | Built-in state rendering. |