Tables
Tables are used to display information that allows users to quickly scan, sort and compare data.
Anatomy
A) Table Header B) Sort icon (Optional) C) Row divider D) Table Cell / Table Data
Interaction States
Hover
All table rows have a hover effect, regardless if they are clickable, the visual change helps readability of the table.
Sizes
Table Cell Sizes
A table will fit the width of its container, in some cases you may want to limit the max width of a table. Adjusting the padding around the table cells changes the tables appearance. • None: Not used oftern - Only if you need in nest extra content inside a table cell. • Small: Used to create a more compact table. • Medium: The go-to table cell size for the majority of applications. • Large: Used when there is plenty of space and a small data set.
Usage Guidelines
Right align numeric values
When working with numeric values generally they should be right-aligned to provide ease of scanning and comparing. Column headers follow the alignment of the data. Numbers that do not need comparing, such as phone numbers, can be left aligned.
Work with missing data
When there are gaps in the data, use a dash (-) to represent null or not applicable values.
Avoid zebra stripes
The design of the tables and hover interactions are enough to promote readability, don’t include additional styling.
Don’t be evil
Yeah… don’t