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

...

• Data tables may include either a live search or an explicit search with autosuggest. For more information see Search.

• On data tables, search may be applied on:

  • visible columns, for example a name from the employee column.

  • columns that are not visible at the moment, as long as the data is shown on a details pane, or on other pages. For example, a user can search for an extension even if that column is hidden, as long as the data is shown on the details pane.
    Another example is searching for a text within an interaction, when the transcription is shown on a different workspace.

• The matching characters will be highlighted in the results.

• Search field hint:

  • If all relevant data is searchable, the search field will show the hint text “Search”.

  • If only specific fields are searchable, the search field will show a hint specifying the searchable fields, e.g. “Search name and description”.

    • If the hint text is longer than the available space in the search field, an ellipsis will be displayed with the full text shown in a Tooltip on hover.

...

Best practices

Use:

• When each data object contains a large number of parameters.

...