Data Table
The right tool for comparing many records across many attributes, and a large amount of behaviour to specify.
Definition
A data table presents records in rows and attributes in columns. Its value is comparison down a column, which is why alignment, formatting and column choice matter more than styling.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this page
Behaviour to specify
- Sorting per column, with a stable tiebreaker and aria-sort on the header.
- Column visibility and order, persisted per user in tools people live in.
- Sticky header, and sticky first column where rows are identified by it.
- Row selection with bulk actions, including a clear select-all scope.
- Density control, implemented as a spacing multiplier.
- Pagination or virtualisation for large sets, with virtualisation done carefully so keyboard and find-in-page still work.
- Empty, loading and error states for the table body, which are three distinct states.
Formatting rules that make tables readable
- Right-align numbers, left-align text, and use tabular figures throughout.
- Consistent decimal places within a column, so magnitudes line up.
- Units in the header rather than repeated in every cell.
- Truncate long text with the full value available on hover and focus, never silently.
- Use real table markup with th elements and scope, so the structure reaches assistive technology.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Principles behind this
The reasoning this solution is an application of.
- Flexibility and Efficiency of UseHeuristic
- AlignmentUI foundation
- Borders and DividersUI foundation
- Responsive LayoutUI foundation
Depends on
Get these right first, or this one will not hold.
- Reflow and ZoomAccessibility
- Target SizeAccessibility
- DensityUI foundation
How many rows fit on one screen decides whether the table can be compared at all.
Often used with
These usually appear in the same screen or the same decision.
- ChartComponent
- PaginationComponent
- Activity TimelinesPattern
- Bulk ActionsPattern
- ComparisonPattern
- DashboardsPattern
- Empty StatesPattern
- FilteringPattern
- SortingPattern
Alternative approach
A different answer to the same problem, with a different cost.
- CardComponent
Tables compare across records. Cards suit one record at a time on small screens.
Practical example
A worked decision where this was the deciding factor.
- Putting a Data Table on a PhoneCase study