Data Table Design: A Practical Guide for Product Designers

What makes a good data table? A good data table lets people find, compare and act on information without thinking about the table itself. That comes down to five things: a clear column order, consistent alignment, a density that fits the task, headers that stay visible, and structure (nesting, paging) that matches how the data is really organized.

Start with the job, not the columns

Before you draw anything, write down the two or three things people do in this table. "Find a late order and open it" leads to a different table than "compare yields across ten fields." Columns that serve the main job go first and left. Everything else is a candidate for a detail view.

Alignment: the rule that fixes most tables

• Left-align text.
• Right-align numbers, so the digits line up and are easy to compare.
• Align headers with their column's content.
• Center almost nothing. Short status badges are the usual exception.

Density: compact, regular or relaxed

People who live in a table all day want more rows on screen. Occasional users want more breathing room. Many products offer two or three row heights and let people choose. Pick a default based on who uses the screen most.

Headers that stay put

Once a table scrolls, people lose track of which column is which. Freeze the header row, and on wide tables freeze the first column too (usually the name or ID).

When the table has too many columns

Wide tables are the most common complaint in data-heavy products. Hiding low-priority columns, letting people choose columns and moving detail into an expandable row all help. Full guide: What to do when a table has too many columns.

Expandable and nested rows

When each row has children (an order and its line items, a policy and its claims) you can show them inline instead of sending people to another page. Read Tables with expandable rows for the interaction, and Nested data tables for when nesting helps and when it hurts.

Pagination, scrolling or load more

Long tables need a way to move through the data. Pagination suits tables people search and return to. Infinite scroll suits casual browsing, and rarely suits a work tool. Full guide: Pagination UX best practices.

Empty, loading and error states

Every table has at least three states besides "full": empty (no data yet), no results (a search found nothing) and loading. Design each one. An empty table should say why it's empty and what to do next.

Accessibility is structure, not decoration

Screen readers rely on real table markup: header cells, captions and the relationship between them. If the table is built from divs, much of that is lost. Full guide: Accessible tables.

Look at real patterns

The fastest way to improve a table is to study how good products solve the same problem. See Table UI design examples.

Designing data tables faster

In most design tools a table is dozens of boxes, so every structural change means fixing cells by hand. A dedicated table builder lets you change the structure once and export the code when you're done.