Table UI Design: Patterns and Examples for Data-Heavy Products

What makes good table UI? Good table UI makes the important column obvious, keeps headers and identifiers in view, uses alignment and spacing to make values comparable, and puts actions where people expect them. The patterns below cover the decisions that come up in almost every data-heavy product.

1. Status badges. Short colored labels (Active, Late, Denied) scan faster than words in plain text. Pair color with text, never color alone.
2. A clear primary column. The column people identify a row by (name, ID) is bolder or a link, and sits first.
3. Right-aligned numbers. Numbers align on the right so digits line up for comparison.
4. Row actions on the right. Edit, open and more-actions menus usually sit at the far right, often shown on hover to reduce clutter.
5. Frozen headers and first column. Long and wide tables keep their headers and identifying column in view while scrolling.
6. Density options. Compact, regular and relaxed row heights, chosen by the person using the table.
7. Expandable rows. Detail opens in place instead of on a new page. See Tables with expandable rows.
8. Designed empty states. An empty table explains why it's empty and offers the next step.
9. Truncation with a way out. Long text truncates with an ellipsis and shows the full value on hover or in the detail view.
10. Clear pagination. People always know which page they're on and how many results there are. See Pagination UX best practices.

Start from a pattern, not a blank canvas

GridForge's data table templates give you a starting table to customize on the canvas, with frozen headers and nested rows built in.

This guide is part of Data table design: a practical guide.