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

...

• the width of the table columns should be reduced until all white space has been removed, except for minimum padding.

• where possible, the width of columns may be reduced further by introducing line breaks in each cell, increasing the height of each row. This is particularly suitable in portrait orientations.

  • Note that some rows should never allow line breaks, such as those containing date and time data.

• optionally, non-essential columns may be removed so that essential data is prioritisedprioritized.

Where the width of the table still exceeds the width of the container:

• 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 where there are mandatory or pinned columns, they are sticky and will remain 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)

• if a checkbox column is used (for multi-select tables), that will also remain sticky.

Wide	Standard	Narrow	Very narrow

...