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 the user is transported (to another view, to a slide-out, etc), the whole row should be clickable. There are a few exceptions:
- When a value needs special attention (highlighted value)
- If a row contains additional information (chevron)
Big, huge tables
If a table does not fit horizontally, it should be scrollable within its container or device viewport. When necessary, table row layout can be converted to a regular list that groups the content within a row in a stack.
What about responsive tables?
This is something we talk about all the time. It all depends on the size of the tables, the amount of data in it and what you can do with it. Primarily we see the following three ways to do responsive tables:
1. Prioritised columns
This is the way that makes most sense. Make careful choices as to what columns should be presented or hidden in smaller viewports. Usually it is possible to hide more than you think!
2. Scrolling table
The table size is fixed and our user can scroll in horizontally to view all columns.
3. Cell table
All, or prioritized columns, are grouped into one cell that may be spread on multiple lines to summarize the columns of the table.
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.
- When needed, use the smaller input fields and buttons within in a table or a list.
- 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 800 #333333
- Normal = Grey 300 (#DEDEDE), Selected= Dark Blue 2 (#007AC7), Hover = Blue (#41B0EE)
- FontAwesome solid "chevron-up" and solid "chevron-down", on top of each other, width 10 px height 16 px (together)