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.
Inline Editing Tables	Where inline editing is needed.
Tree Tables	For presenting hierarchical data.
Extended Rows Tables	Where rows contain additional textual information, relevant across all columns.
Spreadsheet Tables	Allows users to quickly edit data in cells.
Dynamic Tables	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).

...

Selection and focus move together (unless the user splits them).
Where row selection is not needed, use cell focus only.
When moving the focus between cells:
- Focus will always be on the entire cell for:
  - cells with read only content.
  - standard header cells.
- Focus will always be on the component(s) within the cell for:
  - cells which only contain simple components such as a Checkbox or Icon buttons.
  - cells that contain both text and a simple component
  - header cells with a master checkbox component.
- For cells which contain a text input component (and therefore its own internal left/right navigation), i.e. Text field, Text area, Numeric stepper, Date picker, and Combo box:
  - the focus will initially be on the cell itself.
  - Enter moves the focus to the component ready for text entry.
    Image RemovedImage Added
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 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.

...

Keyboard	Behavior - rows	Behavior - cells
Tab	From a previous component the first cell in the header row will be focused. (See guidelines above for different types of cells). From a header row cell, a table row will be focused. If no row is selected - the first row will be selected and focused. If one row is selected - the focus will return to this row. If multiple rows are selected - the focus will return to the first selected row. From any other table row (the entire row is focused) - navigates to the next component, exiting the table.	The focus will return to the row if the focus is currently on: the cell (except for header cells), or a non-text input component inside the cell. The focus will return to the cell if the focus is currently on: a text input component inside the cell.
Shift + Tab	From the next component outside of the table, a table row will be selected (as per the rules per Tab). From a header row cell - navigates to the previous component, exiting the table. From any other row - navigates to the first cell in the table header row.	N/A
Space	For multi-select tables where focus in on a row but the row is not selected - selects the row (if the row is selected - deselects the row). For single-selection table - N/A.	Depending on cell content.
Enter	N/A	Cells with text input - moves focus from the cell to the text input component. Cells with other input types - N/A Cells with action buttons - performs the action. Where the action is Edit - the focus will move to the first focusable item in the row. Image RemovedImage Added
Esc	N/A.	Moves focus to the entire row. When the user is in edit mode - Opens a message popup asking the user whether they wish to keep editing or cancel. If the user selects to cancel, the focus will move to the entire row. Where the cell contains a component which uses Esc and the component is active - performs the Esc on the component first. Where the cell contains a text input field, and the field is active - takes the user back to the cell level.
Up/Down arrows	When focus and selection are on the same row: Moves the selection and focus one row down/up respectively. Note: for multi-select tables, the selection on the previous row is removed (unless the focus and selection are split using control. See below.) When selection(s) and focus are on different rows: the selection will move to the same row as the focus (all other selections will be removed). Up/Down will stop at the top and bottom row. Will not: exit the table. loop round to the top or bottom row.	When focus is on a cell: Moves the focus one cell up/down respectively. Selection does not follow cell focus.
Control + Up/Down arrows	When focus and selection are on a row: Separates the focus from the selection. Moves the focus one row up/down.	N/A
Shift + Up/Down arrows	When focus and selection are on a row - Accumulates the selection of rows. For single selection tables - N/A.	N/A
Left/Right arrows	Right - changes the focus to the first cell on the left. Left - N/A For RTL tables the controls are reversed: Right - N/A Left - changes the focus to the first cell on the right.	Moves the focus one cell right/left respectively. Will stop at the first or last cell in the row. Will not: loop to the start or end of the same row. move onto the rows below or above. exit the table, even from the first or last row. See guidelines above for focus rules in different types of cells. Where there are multiple components in one cell, left/right will navigate between them.
Home	Moves the focus to the first row.	Moves the focus to the first cell in the row that currently contains the focus.
End	Moves the focus to the last row.	Moves the focus to the last cell in the row that currently contains the focus.