Table Patterns

When to Use Tables

• Comparing multiple items across the same attributes
• Displaying structured data that users need to scan, sort, or filter
• NOT for layout. NOT when a card list would be more scannable.

Column Design

1. Left-align text, right-align numbers. Decimal points should line up vertically.
2. First column is the identifier. Name, title, ID, whatever uniquely identifies the row.
3. Action column goes last. Edit, delete, view buttons on the right.
4. Pin the identifier column on horizontal scroll. Users need context when scrolling wide tables.

Sorting

• Default sort should be the most useful order (usually most recent first or alphabetical)
• Show sort direction with an arrow icon
• Allow sorting on any column that makes sense
• Remember sort preference across sessions