Good data tables allow users to scan, analyze, compare, filter, sort, and manipulate information to match their current needs.
When and how to use it
Use tables to structure information and provide an overview, allowing the user to spot patterns and possible issues without being overrun with all the details.
A table always contains a header row that holds the names for each column. Summary should be located at the bottom of a table.
If a table does not fit horizontally, it should then be scrollable within its container or device viewport.
The whole row should be clickable, with a few exceptions;
- when a value needs special attention (highlighted value)
- if a row contains additional information (chevron)
The above actions supersede the default behaviour of a row for contextual actions.
When necessary, table row layout can be converted to a regular list that groups the content within a row in a stack.
Do's and don'ts
- Try to keep the column names short, preferably to one word. Use tooltip if needed to further explain.
- It is OK to let content inside a table cell wrap into 2 or more rows.
- Nesting tables can be difficult. Group content as list items instead within a expanded row.
- Having all rows expanded at first does not achieve a better overview. Urge a user to explore interesting content in a specific row or slideout modal.
Examples we like
- Header font: 16 px, medium, Grey 2 (#333333)
- Normal = Grey 7 (#B2B3B3), Selected= Dark Blue 2 (#007AC7), Hover = Blue (#41B0EE)
- FontAwesome solid "chevron-up" and solid "chevron-down", on top of each other, width 10 x height 16 px (together)