ui patterns
Data table
What makes a data table usable - and when shouldn't I use one?
A data table arranges records in rows and columns so they can be scanned, compared and reordered along any field. Its power is alignment: shared columns let the eye run straight down a value to compare like with like, and sorting reorders the whole set to answer "which is biggest, newest, cheapest?" in one click.
Also known as: data table, data grid, sortable table
Prefer to watch?
Watch the recap 0:48
The demo
Five teammates and their scores. Click any column heading to sort the whole table by it - and watch how the aligned columns let you compare and rank at a glance.
What this demo shows (text version)
A table lists five teammates with three columns: name, role and score. Clicking a column heading sorts every row by that field; clicking the same heading again reverses the direction, and the active column shows which way it's sorted. The score column is right-aligned so the numbers line up and their sizes compare straight down the column.
That's what a table is for: shared columns let you compare like with like, and a single sort reorders the whole set to rank it - highest score first, say. When the task is to compare records across the same attributes or rank them by a value, a table beats a list; when people mostly read one item at a time, or on a narrow screen where wide tables break down, cards or a list serve better.
A table earns its place when people need to compare records field by field or reorder them by a value - alignment and sorting are what it's for. Make columns sortable with a clear indicator, right-align numbers so they compare cleanly, keep headers present when scrolling, and reach for cards instead when the data is more "browse" than "compare" - especially on narrow screens, where wide tables fall apart.
One click on a column header and the whole set reordered to answer your question - highest score, then lowest, in an instant. That's the table doing what only a table does: line values up in a column so they compare at a glance, then sort to rank them. Take away the alignment and you've just got a list.
Tables are for comparing and ranking, not merely listing. If users mostly read one record at a time, or the fields don't line up into meaningful columns, a table's grid is overhead - cards or a plain list serve better. Use the table when "compare these across the same attributes" or "sort by this value" is the actual job.
Small choices decide whether a table is scannable. Right-align numbers and use consistent decimals so magnitudes compare down the column; left-align text; keep the header visible when the body scrolls; and make sortable columns obviously sortable, showing the current sort direction. These aren't polish - they're what makes the column do its job.
The hard case is small screens. A wide table that forces horizontal scrolling or shrinks to illegibility has stopped helping. Prioritise the columns that matter, let the rest collapse into a detail view, or switch to a card layout below a breakpoint - the data's job (compare, rank) matters more than preserving the grid.