Skip to content
UX Atlas
Plate CMP·025 · ComponentGrid E1 · Rev. 2026-08-14

Data Table

The right tool for comparing many records across many attributes, and a large amount of behaviour to specify.

ComponentCraft conventionAdvanced

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 plate
  1. 1Definition
  2. 2Behaviour to specify
  3. 3Formatting rules that make tables readable
  4. 4Tables that stay readable
  5. 5In practice
  6. 6Local chart
  7. 7Continue from here

Reach for this when

  • Comparing many records across attributes.
  • Data-dense professional tools.

Common mistakes

  • Columns removed on small screens.
  • Unstable sort ordering.
  • Div-based tables with no semantics.
  • Numbers left-aligned or with inconsistent precision.

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.

Tables that stay readable

Do

  • Right-align numbers, use tabular figures, and keep decimal places consistent down a column.
  • Keep the header visible while the body scrolls, and mark the sorted column with aria-sort.
  • Give every action column a header, even a visually hidden one.
  • Let the reader choose density, and remember the choice.

Do not

  • Collapse a table into cards on mobile when the task is comparison.
  • Put twelve columns on screen because the data has twelve fields.
  • Truncate with an ellipsis and no way to see the full value.
  • Use a table for layout, which breaks the semantics for anyone navigating by cell.

In practice

  1. i.

    Sorted, then paginated

    Order of operations

    Sorting that only reorders the current page tells the reader something untrue about the data. Sort applies to the whole set, and pagination applies afterwards, or the numbers on screen are meaningless.

  2. ii.

    The column nobody could compare

    Number formatting

    Amounts rendered with varying decimal places and proportional figures made a column of prices impossible to scan for magnitude. Tabular figures and a fixed precision fixed it without changing the layout.

Local chart

CMP·025 · Region III · Grid E1

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Flexibility and Efficiency of UseHEUR·007 · PRINCIPLES BEHIND THISAlignmentFND·003 · PRINCIPLES BEHIND THISBorders and DividersFND·047 · PRINCIPLES BEHIND THISResponsive LayoutFND·043 · PRINCIPLES BEHIND THISReflow and ZoomA11Y·013 · DEPENDS ONTarget SizeA11Y·011 · DEPENDS ONDensityFND·016 · DEPENDS ONChartCMP·028 · OFTEN USED WITHPaginationCMP·021 · OFTEN USED WITHActivity TimelinesPAT·019 · OFTEN USED WITHBulk ActionsPAT·017 · OFTEN USED WITHComparisonPAT·006 · OFTEN USED WITH

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

A DashboardA Data TableA Pricing PageAn Enterprise Workflow

Principles behind this

The reasoning this solution is an application of.

Depends on

Get these right first, or this one will not hold.

  • Reflow and ZoomA11Y·013 · Accessibility
  • Target SizeA11Y·011 · Accessibility
  • DensityFND·016 · UI 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.

Alternative approach

A different answer to the same problem, with a different cost.

  • CardCMP·022 · Component

    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.

Short definition

The one-paragraph version, for when that is all you need.