Tables
Tables are used to organize and display data efficiently, an arrangement of data in rows and columns. The Table component allows for advanced customization, as outlined below.
Anatomy
Tables always have a column header bar, a table row area and an optional table footer.
- 1 Column header: title for the row header with the optional sorting, filtering, resizing and moving behavior. The header is always fixed and stays in sight when scrolling down the page.
- 2 Table row: can be configured to show different types of data. Rows can be selectable, have a hover state, and can be modified to show alternating zebra stripe background colors. Additionally, all cells within a given column can be configured to visualize a colored heatmap.
- 3 Table footer: can be used to show the totals, or average values of a given column. The footer is an optional element and is always fixed at the bottom of the table component.
Variants
Tables are ideal for organizing and displaying structured data in an interface, but the purpose can vary. There are two main table variants, which can be configured further in detail:
Data Table
Data tables are used to display large sets of data, which often have more than 10 columns and hundreds of rows. Rows are dense and the user can often interact and customize the table (amount and type of columns, change the size and order of columns etc.). Data tables must always use zebra styled rows and will often scroll vertically and horizontally.
List Table
List tables are used to show a simple list, often with just 2-4 columns. The column to the left is often the main column and contains the name or title of an object (e.g. an User, Report, Group, etc.). List tables can usually not be customized.
Sizing
Tables are available in three sizes: small, medium, large.
The table header row should always match the size of rows in the table body.
When to use:
- Small: for extremely large data sets and tables with many columns. Only to be used when the main purpose of the table is to show as much data on a page (often full-width) as possible.
- Medium: default size for all tables.
- Large: should only be used for list tables with a limited expected amount of rows.
Formatting
Zebra Stripes
Table rows can be configured to be styled with alternating colors, which makes scanning horizontal information easier for the user. Zebra stripes should always be used in the data table variant, but should be avoided in list table variants.
Borders
Columns can be separated by subtle borders, which makes it easier to differentiate between cells that contain similar data. Column borders should always be used in the data table variant, but should be avoided in list table variants.
Text Alignment
Text within table cells can be configured to be left aligned (default), or right aligned. Right aligned text should always be used for columns that exclusively contain only numbers.
Links styles
The clickable area in cells with links changes based on the number of links in the row:
- One link: Hover highlights the entire row and the link (text-link color).
- Multiple links: Hover highlights the row, but only the link's cell is clickable.
Link styles also depend on the number of links in the row.
- One link: Default text is black, turns blue on hover.
- Multiple links (Drilldown): Default text is black/gray, turns blue on hover (including icon).
Multi Line and Truncations
Table cells in column headers, as well as regular rows can contain text that spans over two lines of text. When there is not enough space available, or the cell content would create another line break, text is truncated and shows the full cell value on mouse over, in a tooltip.
Status Indicators
Statuses within table cells should be both informative and visually distinguishable. To achieve this, leverage the Badge component.
Each table cell should display Badge components to convey the presence of one or more associated statuses. The choice of badge colors should be consistent with the designated color-coding for each status to maintain a coherent visual hierarchy within the table.
In cases where multiple badges employ the same color to indicate different statuses, you should make use of distinct icons inside the badges.
Heatmaps
A heatmap is a graphical representation of data where the individual values contained in a matrix are represented as colors. Columns that have a heatmap applied can be scanned more quickly by the user, and can help to identify outlying data points. While heatmaps can be extremely powerful, make sure to not overuse them and only apply heatmaps when they offer some additional value.
Colors
The strength of the color is defined by the cell value. Each heatmap should have ten “color steps”, which define the alpha channel value of the color (e.g. on a possible cell value scale of 0 to 100, a value of 34 would have a background color with an opacity of 0.3).
The default heatmap color is purple, but there is a collection of other supported colors available:
| Token | Color |
|---|---|
heatmap-1 | #C19CFF |
heatmap-2 | #94ACFF |
heatmap-3 | #57B9F0 |
heatmap-4 | #4EC8C0 |
heatmap-5 | #6FC284 |
heatmap-6 | #A2C86D |
heatmap-7 | #C0C840 |
heatmap-8 | #F9BD33 |
heatmap-9 | #F5A167 |
heatmap-10 | #FF8F8F |
heatmap-11 | #D9A6C1 |
heatmap-12 | #D1A591 |
Behaviors
Hover
A row hover state can help users to visually scan the columns of data in a row.
Sorting
Columns can be sorted in ascending or descending order. Sorting controls are located in the column headers and indicated with an arrow icon that changes based on the currently applied sorting mode.
Column Action
Column headers can contain one Icon Button to perform actions related to the columns data. These actions could be: filter the column data via a filter popover, quick action to remove the column, or edit the column title.
Row Actions
Buttons and menus for row-context actions are positioned in the last column of the table, optimizing the use of screen real estate.
The column header for actions does not bear a dedicated label. Instead, we prioritize a clean and uncluttered design, allowing users to intuitively engage with the data.
When a table cell accommodates more than three actions, up to three action buttons are rendered. These buttons serve as immediate and convenient options for commonly performed actions, providing a seamless user experience. The remaining actions are hidden behind an 'Action Menu' button, which is indicated by an ellipsis icon. The Action Menu is a comprehensive repository of all available actions, including the three actions already visible in the row. This ensures that users can readily access and engage with the full spectrum of available actions while keeping the interface uncluttered and user-friendly.
Resizing Columns
Columns can be set up to be resizable by the user. When resizing is enabled, moving the mouse cursor over the right border of a column header will show a resize drag handler.
Reorder Columns
Columns can be set up to be moveable. When reordering columns is enabled, moving the mouse cursor over a column header will show a drag handler, which can be used to move the columns within the table. Columns can only be dragged within their designated area: when moving a column that is located inside a sticky column group, the column can only be moved within that group.
Loading
When a table can already be rendered (columns are known), but the data is not available yet, the table rows are shown with randomly distributed skeleton loaders. Skeleton loaders are then replaced with the data once available.
Empty State
When there is no data available to be shown, the table body should contain an Empty State. The Empty State should use the related illustration (no data because set filters aren’t matching any data points, no data at all, or various errors) and communicate why there is no data showing up. To find out more about Empty States, head over to the patterns page.
Placement
Tables should be placed in a page’s main content area and given plenty of space to display data without truncation. Avoid placing data tables inside modals or smaller containers where the information can feel cramped.
Full-width Tables
Data tables are usually rendered on a page where they take all the available width and height. Scrolling happens inside the table body and should be avoided on the page level.
Full-width tables often allow for advanced column manipulation, like adding or removing specific columns, moving columns around, or manually changing the size of a column. Columns can be configured to become locked and sticky. Sticky columns are always rendered on the left side of the table and always stay fixed in position – scrolling horizontally within the table does not affect sticky columns.
In-page Tables
List tables, or tables that contain smaller datasets are usually rendered within an arrangement of Tiles or Panels. The table itself does not interact with scrolling actions, as these are handled in the parent elements, either the Panel/Tile, or the page itself. In-page tables should avoid making use of sticky columns, fixed headers and horizontal scrolling.