This component is highly customizable. There are many types of information you can show in our data table component, as shown in the following examples. All table columns are sortable, except for the actions column.
While the number of columns is not fixed, the amount of columns should not be so high as to interfere with the user’s ability to read the table. The user cannot edit in-line within a table due to accessibility concerns.
Variations
Standard table
This is our standard table. It can contain static information or a link and static information. It can have a footer or not, depending on the amount of data in the table.
| Standard Table Cell | Standard Table Cell | Standard Table Cell | Standard Table Cell |
| Standard Table Cell | Standard Table Cell | Standard Table Cell | Standard Table Cell |
Table with selectable rows
Adding a checkbox to each row will allow the user to select and deselect rows.
| Standard Table Cell | Standard Table Cell | Standard Table Cell | Standard Table Cell | |
| Standard Table Cell | Standard Table Cell | Standard Table Cell | Standard Table Cell |
Table with actions
The user can perform individual actions each table row. These actions appear in the last column to the right. If there are more than two actions, these actions should appear in a dropdown (see the next example).
| Actions | ||||
|---|---|---|---|---|
| Standard Table Cell | Standard Table Cell | Standard Table Cell | Standard Table Cell | |
| Standard Table Cell | Standard Table Cell | Standard Table Cell | Standard Table Cell |
Table with action dropdown
If there are more than two actions (see the preceding example), these options should appear in a dropdown represented by an icon. In this case, the action column should not have a header.
| Actions | ||||
|---|---|---|---|---|
| Standard Table Cell | Standard Table Cell | Standard Table Cell | Standard Table Cell | |
| Standard Table Cell | Standard Table Cell | Standard Table Cell | Standard Table Cell |
Table with an icon column
Boolean information can be represented as an icon. The icons that are most often used are checkmarks and warning icons. These icon columns should only be used for simple yes / no, true / false options. These icons must always be accompanied with an aria label.
| Standard Table Cell | Standard Table Cell | Standard Table Cell | Standard Table Cell | |
| Standard Table Cell | Standard Table Cell | Standard Table Cell | Standard Table Cell |
Table with a status column
If all objects are assigned statuses, these statuses should be shown in the table. Indicators accompany status text to help with scannability. Status indicators must always have a label. See the icons page for more information around status indicators.
| Standard Table Cell | Standard Table Cell | Standard Table Cell | Standard Table Cell | |
| Standard Table Cell | Standard Table Cell | Standard Table Cell | Standard Table Cell |
Table with expandable rows
Table rows can expand to reveal more information relating to the open row. Information can appear in columns or in multi-line strings. The information shown should be necessary to help the user make an action or decision on the page.
| Expand/Collapse | ||||
|---|---|---|---|---|
| Standard Table Cell | Standard Table Cell | Standard Table Cell | Standard Table Cell | |
| Standard Table Cell | Standard Table Cell | Standard Table Cell | Standard Table Cell |
Table with expandable and selectable rows
Table rows can be expandable and selectable.
| Expand/Collapse | |||||
|---|---|---|---|---|---|
| Standard Table Cell | Standard Table Cell | Standard Table Cell | Standard Table Cell | ||
| Standard Table Cell | Standard Table Cell | Standard Table Cell | Standard Table Cell |
Table with a link column
The link column most commonly appears as the first column, as the object or row identifier. The link takes the user into the object to view or edit. Tables can have multiple link columns. This is generally used if the object or row contains information that lives in different places.
| Standard Table Cell | Standard Table Cell | Standard Table Cell | Standard Table Cell | |
| Standard Table Cell | Standard Table Cell | Standard Table Cell | Standard Table Cell |
Table with filters
Table filters allow the user to view subsets of a larger data set. Table filters vary from product to product, and depend on the filterable data set. They appear below the page header and above the table. Please see table filters for more information.
Table with footer
Most of our tables have footers attached. The footer allows the user to go through multiple pages of data and choose how many rows they want to see per page. The footer can also contain a column selector and/or a display density selector. The user can select which columns to display through the column selector, and, if applicable, at which density they want to view the data. Pagination is required when using the table footer.
| Standard Table Cell | Standard Table Cell | Standard Table Cell | Standard Table Cell |
| Standard Table Cell | Standard Table Cell | Standard Table Cell | Standard Table Cell |
| Standard Table Cell | Standard Table Cell | Standard Table Cell | Standard Table Cell |
| Standard Table Cell | Standard Table Cell | Standard Table Cell | Standard Table Cell |
| Standard Table Cell | Standard Table Cell | Standard Table Cell | Standard Table Cell |
| Standard Table Cell | Standard Table Cell | Standard Table Cell | Standard Table Cell |
| Standard Table Cell | Standard Table Cell | Standard Table Cell | Standard Table Cell |
| Standard Table Cell | Standard Table Cell | Standard Table Cell | Standard Table Cell |
| Standard Table Cell | Standard Table Cell | Standard Table Cell | Standard Table Cell |
| Standard Table Cell | Standard Table Cell | Standard Table Cell | Standard Table Cell |
Configurations
The page title is the only required element in a landing page header. All elements in the table below are optional.
| Element | Purpose | Notes |
|---|---|---|
| Pagination | Navigates the user to other pages of data of the same table | Use when the table has more than ten rows of data |
| Column selector | Allows the user to show and hide columns from the table | |
| Display density | Navigates the user to a page or opens a modal where the user can create a new object | |
| Link | Navigates the user to another page related to that row’s information | Use when the user needs to see more information about a row or an object |
| Multi-select checkboxes | Allows the user to select an entire row | Use when the user should be able to perform bulk actions on selected rows |
| One to two actions | Allows the user to take individual actions on one row at a time | Use when the user should be able to take one or two actions on an individual row |
| More than two actions | Allows the user to take individual actions on one row at a time | Use when the user should be able to take more than two actions on an individual row |
| Icon column | Represents boolean information with icons | Use when there is boolean information that would better be represented by icons |
| Status column | Shows the status of each row or object | Use when every row or object within the table has a status |