Data Tables & Filtering
An operations team lives in a table fourteen columns wide. It opens sorted by nothing useful, the header scrolls away after twenty rows, and on a phone it is hopeless.
Turn heavy tables into fast answers: listen on the way, sketch it when you sit down.
Listen to the full Data Tables & Filtering course on DesignPath
So they export to a spreadsheet. Every day, the same export, and all the work that follows happens somewhere the product cannot see, cannot log and cannot improve.
That is the real cost of a bad table. People do not complain about it, they leave, and the product loses sight of the work it was built for.
Anatomy of a Data Table
A table is a grid with a lot of furniture around it, and most of the furniture is where the design decisions live.
The Parts
Nine, and the grid itself is only three of them.
The header row, naming each column, which WCAG 1.3.1 requires be marked as headers rather than styled to look like them. The rows and the cells in them. The identity column, which is the one saying what this row is, usually a name or a reference. The row actions, whatever can be done to a single row. The selection control, where several rows can be acted on at once. The filter bar and the sort controls. The footer, carrying counts and pagination. And the empty state, for when the filters match nothing.
The Identity Column
One of those nine does more work than the rest.
Every other cell is meaningless without it: 4,182 tells nobody anything until they know whose row it is on. On a narrow screen or a wide table, the identity column is the one that has to stay put while the rest scrolls, and article 6 covers how. Losing it is what turns a table into a page of orphan numbers, which is the most common complaint about tables and the least often diagnosed.
Two Jobs a Table Does
The design changes depending on which one the person is doing.
Finding one row means somebody knows what they are looking for, so search, filters and a stable sort carry the weight. Comparing across rows means they are scanning a column for outliers, so alignment, density and column choice carry it. A table serving both needs the identity column readable at speed and its numbers aligned down each column, which is article 3.
The Properties That Apply to the Whole Thing
Three settings apply across the table rather than to any part.
Density, meaning how much vertical space a row gets. Alignment, per column and by data type. And scope, meaning whether an action applies to the page in front of somebody or to everything their filter matched. That last one is the most expensive mistake in the pattern. The header checkbox can mean fifty rows to the person pressing it and twelve thousand to the product, which article 5 covers.
Pro tip: Take your widest table and scroll it sideways. If the identity column leaves the screen, every number still visible has lost its meaning, and that is a layout decision somebody made without noticing.