Table and Data Grid Design
Tables are the right tool for displaying structured, comparative data — when users need to scan across rows and columns, or when the data is dense enough to require tabular organisation. Poorly designed tables are among the most frustrating UI elements in business software.
When to Use a Table
Use a table when: there are multiple attributes per item that users need to compare, the data is structured and consistently formatted, users need to sort, filter, or search across the data, or users need to perform actions on specific rows.
Table Design Principles
- Appropriate column count: Fewer, well-chosen columns are better than many columns of which users only use a few. Allow column visibility customisation for power users.
- Alignment: Text left-aligned; numbers right-aligned (so decimal points line up); dates left or centre. Consistency is essential.
- Row density: Offer compact/comfortable/relaxed density options for data-heavy tables — different users have different preferences
- Fixed headers: When tables scroll vertically, column headers should stick so users never lose context
- Sort indicators: Show clearly which column is sorted and in which direction
Responsive Tables
Tables on mobile are notoriously difficult. Strategies include: horizontal scrolling with fixed first column, card-based alternative layout on small screens, or progressive disclosure (show key columns by default, reveal others on demand).