Component · data.table
Table
A tabular structure for comparing rows of related data across columns.
Informative mappings only. Platform examples below describe possible target primitives. This release does not ship adapters for React, Swift, Android or any other platform.
Anatomy
| Part | Required | Description |
|---|---|---|
caption | no | Visible or accessible table title. |
columnheader | yes | Header cell describing a column. |
row | yes | Data row. |
cell | yes | Data cell. |
States
- default
- sorted
- selected-row
- loading
- empty
Keyboard
- Tab moves to interactive cells and controls
- Arrow keys may navigate grid-like interaction when a grid pattern is declared
Accessibility
Expose table or grid semantics consistently with interaction. Associate headers with cells. Sortable headers must expose sort direction. Empty and loading states need text alternatives, not only spinners.
Motion
Row reordering or sort animations should be subtle; under reduced motion, update order without sliding rows.
Platform mappings
web
web
Native table markup for tabular data; ARIA grid only when interaction requires it.
apple
apple
SwiftUI Table where available, or accessible list/grid alternatives.
android
android
Compose table or lazy grid patterns with header semantics.