Tables & data states
Use a table when
Section titled “Use a table when”People compare values across records and columns. Use a structured list when each record is read as a self-contained summary.
Choose columns
Section titled “Choose columns”Start with identity, the values needed for comparison, current status, and relevant actions. Secondary metadata can move to detail views or narrow-layout disclosures.
Sorting
Section titled “Sorting”Declare which columns sort, the initial order, and whether the application controls sorting. A sortable header announces the active direction.
Responsive strategy
Section titled “Responsive strategy”Choose one or combine deliberately:
- horizontal scroll for comparison integrity
- priority columns for constrained space
- structured rows for record-by-record reading
- detail disclosure for secondary values
State checklist
Section titled “State checklist”- initial loading
- background refresh
- first-use empty
- filtered empty
- partial rows or unavailable cells
- regional error
- long and localized values
- selected rows and bulk results
Accessibility
Section titled “Accessibility”Keep true table semantics when the visual information remains tabular. Give row actions and selection controls record-specific names.