Provides standard designs and layouts for tables.
Usage Guidelines
Every instance of a basic table should use this component. Pair it with the toolbar component for more advanced use cases.
Features
The basic table does what you would expect, presenting data in a static tabular format with headers.
Columns can be left, center, or right aligned.
Multiline cell content should be avoided where possible. Content should be top aligned.
Note that headers are required for accessibility compliance.
The basic table can be enhanced with some more advanced features to handle more complicated use cases.
Clicking on a column heading sorts the table by the values in that column. Selecting the same column heading twice alternates between ascending and descending order.
If a table has a default sort order it should display the relevant icon at initial presentation.
Example of a sortable table showing the header hover state.
If you have a long table a row hover effect can be enabled which makes it easier to scan and parse.
Hovering a row can change its background color.
In cases where users may need to select and act on one or more rows you may add a checkbox column and include a toolbar at the top of the table.
Clicking or tapping any non-interactive part of a row is a secondary method for selecting that row (this will also check the relevant checkmark, which is the primary method).
Holding down shift and selecting a second row will select all the intervening rows as well.
Example of a selectable table. Hover effects are enabled by default. (Hovering selected rows adds the border effect.)
There are several strategies for ensuring a table works at each breakpoint.
If you determine that certain fields in your table are optional in nature, you can simply remove them to reduce the overall table width until it fits in mobile viewports.
Depending on the type of information presented, a simple way to fit tables into a smaller viewport is combining multiple columns into one. For example, dedicated First and Last name columns can be joined under ‘Name’.
For larger, more complex tables with a lot of non-optional data it may be necessary to change from using a table to some other display strategy in the mobile view. For example, you may adopt a list view where each item can be opened up to view its complete dataset.
Initial Version
Tables