| Table of Contents |
|---|
Description
Data tables display sets of raw data. They are used to make large volumes of data easy to access, understand, and manipulate.
Most data tables are interactive. In some cases a data table can be read-only.
...
Types
Type | Usage |
|---|---|
Basic Data Tables | The most common table, displaying data on a grid. |
Where inline editing is needed. | |
For presenting hierarchical data. | |
Where rows contain additional textual information, relevant across all columns. | |
Allows users to quickly edit data in cells. | |
Allows users to add and delete rows. |
Usage & Behavior
General Guidelines
...
Whether actions are displayed in the table’s Action column or Toolbar depends on its multi-select behavior.
Action type | Include in action column | Include in toolbar | Include in details pane (where shown) |
|---|---|---|---|
Can be performed only on a single row (e.g. Edit) | ✓ | x |
Actions will disappear when more than one row is selected. |
Can be performed on either single or multiple rows (e.g. Delete) | ✓ When multiple rows are selected, a confirmation dialog will be shown asking whether to perform the action only on the single row where the action was selected, or on all selected rows. Only one confirmation message should be shown, even for destructive actions such as Delete.
| ✓ |
|
Can be performed only on multiple rows (e.g. Merge) | x | ✓ Disabled until multiple rows selected. |
|
Default state
A table is always sorted by one of the columns. By default, it is sorted by the most useful data.
In case of selectable rows, the first row will be selected by default.
...
In case of an interactive data table, table rows can have the following states:
State | Image | Comment |
|---|---|---|
Regular |  | |
Hover |  | |
Selected |  | |
Selected, Hover |  | |
Focused |  | |
Focused, Hover |  | |
Focused, Selected |  |
Action column buttons
Buttons in the action column should only be visible according to the state of their table row, as shown below.
Row state | On single-select | On multi-select |
|---|---|---|
Regular | X | X |
Hover | ✓ | ✓ |
Focus | ✓ | ✓ |
Selection | ✓ | X |
Interaction
Header row
The header row is sticky: it is always shown, even when table content is scrolled.
On hover over a header cell, a drop-down icon will be shown near the right side of the cell (optional). This allows the user to open an Action Menu (see below). This will not apply to the checkboxes column or actions column, if exists.
Clicking on a header cell for a column which the table is not sorted by will sort the table by that data and move the sort icon to that column.
Clicking on the header cell for a column which the table is sorted by will reverse the order of the sort (ascending or descending) and flip the icon to represent the new sorting order.
Users can resize the column widths.
Hovering over the border between two header cells will turn the cursor into a double-sided arrow.
Dragging the border to the right or to the left will resize the column to the left of the border.
Double clicking the border will resize the column to the minimum width possible without truncating the column title or the data inside the column cells.
The minimum width will be the width of the title text + additional pixels to contain the sorting indicator.
Users can reorder columns (optional):
Dragging a header cell to the the right or left will update columns order. See /wiki/spaces/~347593403/pages/918783940.
The checkbox column (on the left) and actions column (on the right) cannot be reordered.
Another way to reorder columns is using the Dual List Selector.
If a Checkbox column exists, the first cell of the header may contain a single checkbox, allowing the user to select all rows. In this case:
If the checkbox is unchecked or partially checked, clicking it will select all rows (including rows which are not visible).
If the table is filtered, previously selected items will not be deselected, but will be merged with the new items.
If the checkbox is checked, clicking it will deselect all rows (including rows that are not visible).
...
a horizontal scrollbar should be added to the table. Only the table columns should scroll, with all other elements on the page remaining static.
a single left-hand data column may become sticky, so it remains visible as the user horizontally scrolls through the additional data columns. This is usually the column containing the main item identifier. (Optional).
an additional checkbox or status row may also become sticky. (Optional).
Wide | Standard | Narrow | Very narrow |
|---|---|---|---|
 |  |  |  |
Design
Zeplin link | Screen thumbnail |
|---|---|
  |
Code
...