What it must accomplish
Make relationships across a data set visible without sacrificing semantics or task efficiency.
Usage
Choose the control by behavior
- People compare values across records
- Column relationships matter
- Sorting, filtering, selection, or row actions support a real task
- The content is primarily narrative
- Each item has a different structure
- A small key-value list would be easier to understand
Anatomy
Stable parts create a reliable contract
- 1Caption or visible title
- 2Column headers
- 3Rows and cells
- 4Optional selection
- 5Sorting and filtering controls
- 6Pagination or virtualization
- 7Row and bulk actions
Interaction and keyboard behavior
- Semantic HTML tables remain navigable with reading commands
- Interactive grids require a deliberate two-dimensional keyboard model
- Controls inside cells remain reachable and clearly named
Visual similarity does not guarantee behavioral equivalence. The component contract must preserve state, focus, semantics, and recovery across input methods.
Accessible behavior
- Use table semantics for tabular data
- Associate headers with cells
- Expose sort direction programmatically
- Provide captions or nearby headings
- Do not encode status with color alone
Responsive considerations
Adapt the decision—not only the dimensions
Prioritize columns by task. On narrow screens, consider controlled horizontal scrolling, progressive column disclosure, or a purpose-built record view—never silently remove essential data.
Content considerations
Language is part of the component
- Use concise, unambiguous headers
- Align numbers for comparison
- Format dates and units consistently
- Describe empty and filtered-empty states differently
Patterns that weaken the experience
Turning every list into a table
Putting unlabeled icon actions in every row
Hiding columns without telling users
Using pagination that loses selection or filters
Comparison
What to study across systems
Carbon and SAP Fiori are strong references for dense operational data; USWDS and GOV.UK demonstrate simpler accessible tables; Ant Design provides extensive implementation APIs for product teams.
Open comparison