| 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. |
...
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).
...
Zeplin link | Screen thumbnail |
|---|---|
   |
Code
...