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.

...

• 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).

...

• Non-interactive elements such as text labels will not receive focus (e.g. in an expand/collapse cell with a text label and chevron button). Note: screen readers should still read the un-focused text.

• When a cell is in editing mode, the user will need to leave editing mode by selecting Esc, Apply, or Cancel/Esc before they can navigate the table again. This applies to:

  • cells which contain an active text input component, and

  • active cells within Inline Editing Tables.

...