Tables
Use tables to display collections of data grouped into rows. The grid layout that tables provide allow information to be displayed in a way that’s easy to scan, so that users can look for patterns and insights.
Tables can include three or more columns. A header row at the top lists column names, and all subsequent rows contain data.
Width
Table are located in the main container of the UI chrome. Primarily, the table are as wide as the main container. However, there are use cases were the table does not have a lot of content and is placed in a smaller parent container to place it either to the right or left of other content.
Columns and rows
Columns and rows are organized based on the needs of your users. To help people read the table, order the columns by importance from left to right, with the key pieces of content opening the row.
- Table headings: Describes the content in the column. Try to stick to a single word and be concise and as descriptive as possible. The header column will stay fixed as the user scrolls down the table. This will allow the user to have contexts of the data, no mater how many rows they have selected to display on the screen.
- Empty values: If a cell is empty or unavailable, populate with --. To be clear their is missing data.
- Long text: Truncate long text to fit into the cell.
Content alignment
Content should be left aligned except when using a different alignment helps with comprehension. For example, numeric data is easier to read when right aligned. The alignment of column headers should match the content alignment.
Dynamic tables
A dynamic table lets people manipulate data in the table by adding sorting, filtering, and pagination functionality.
Sorting
Sorting defaults to the first column and sorts both A-Z and 0-100. Sorting capabilities are indicated with a single arrow carrot icon that indicates ascending or descending order beside the column headings. The column that is actively being sorted visual indicator to clearly communicate to the user that is the sorted column. Unsorted columns will have an up and down arrow carrot that indicates that column can be sorted.
Filtering & Search
As demonstrated in the image below that search and filtering functionality is positioned directly above the content.
NOTE: The filter display takes advantage of the design concepts defined by the side drawer to contain the input fields that would be needed to define the filters. As the filters/searches are defined they are displayed directly above the content for quick access to disengage the filter/search.
Actions
Additional actions that a user can take from an individual table row are displayed in the far right column.
In addition, in-line links should be used to provide additional information and context to items in the table.
- Actions: Link buttons used to open modal, or flyout dialog. If there is one action it is displayed as clickable text. For multiple actions an ellipsis icon is displayed and the actions are visable on click.
- In-line Link: A link that takes the user to another page to gain more context, or information, on that item.
- Clickable Row: If the row is clickable there will not be a IN-line Link or Action button that within the row. A highlighted state will appear on hover.
Pagination
If page data overflows the available space, use pagination to set a limit of data per page, and to navigate. Pagination always sit at the top right of the table.
More details on Pagination.
Adaptive
Tables are usually presented at full width, but can also adapt to the space available. Each column has right padding (except the end column), before content gets truncated.
Scrolling
By default tables are responsive making them have the ability to horizontally scroll when the screen is to small to display the full content under the adaptive conditions outlined above.
ANIMATION PENDING