Table Styles & Usage
Tables allow us to display tabular data in an intuitive manner. We design our tables to be simple and minimal with good spacing around cells so they readable and easy to consume.
Option to select the number of rows to view at a given time.
Ascending Icon is chevron up, Descending is chevron down
When available we like to give our users the ability to filter the data using searched terms.
Add a new row
Action buttons and context menus
When space isn't available for the entire data set, we provide the user with the ability to navigate through the data using pagination.
Bulk actions when applicable
Striped rows are optional. Studies have shown that for large data sets using a zebra striped pattern increases performance and readability. However, since many of our data-based widgets do not contain large data sets they are not required.
Striped background color is:
background color
We expect tables to fully accessible on any device size. Tables traditionally have been challenging for users on smaller devices. Often the solution involves making the table scroll horizontally. Our own internal studies have shown forcing the table to scroll horizontally loses too much context when the user can't view the entire rows data set. Therefore, we take a different approach and convert each row into an individual card. To see this approach in action view the examples below and resize your browser down to a mobile size.