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.

Open

Types

Usage & Behavior

General Guidelines

Structure

Data tables consist of:

• a header row.

• at least one data row.

• columns, including two special column types:

  • a checkbox column on the left (optional).

  • an action column on the right (optional).

• a toolbar (optional).

• A pagination component (optional).

Header Row

Open

The header row is the first row of the table, and consists of:

• column titles. All columns (except the Checkbox column, if one exists) should have titles. In some cases, a column header can show an icon instead of text.
  If the column width is too narrow to show the column title it will be truncated, ending with ellipsis. In this case, a Tooltip with the full name will show on hover.

• some additional functionality, such as a columns menus and checkboxes (see below).

In some cases, a group of several adjacent columns may have a parent title. For example, the columns Extension and IP Address may come under the group title Incoming Calls.

Toolbar

The toolbar may consist of:

• table-level actions, such as Create, Refresh etc.

• row-level actions, such as Delete, Export item etc. These actions can be applied to single or multiple rows.

• a search component (where relevant).

• an indicator showing the number of items in the table (see content below).

• table-level actions and row-level actions will be separated by a vertical divider.

For button appearance and interaction, see Buttons.

Placement and Positioning

Table Actions

Whether actions are displayed in the table’s Action column or Toolbar depends on its multi-select behavior.

Default state

• A table is always sorted by one of the columns. By default, it is sorted by the most useful data.

• In case of selectable rows, the first row will be selected by default.

Content

• Each column contains data of a specific type. Data types may include:

  • Free text (e.g., Author name),

  • List items, sometimes with additional icons or indicators (e.g., Status),

  • Number (e.g., Score),

  • Date and Time,

  • A single icon (e.g., Sentiment),

  • Text Links.

• In case of a percentage column or a currency column, each value will have the percentage / currency character next to it (e.g., 87%).

• A table may contain a multi-selection column, allowing users to select one or more rows using Checkboxes. If used, the multi-select column will always be the first one.

• A table may contain an actions column, allowing users to perform row-level actions. If used:

  • The actions column will be the last one, unless otherwise specified.

  • The actions column will always be visible.

  • The column will contain up to 3 icons. The last icon may be a menu icon, allowing the user to open an Action Menu.

Text overflow

• In case of single-line rows, if the text is longer than the column it will be truncated.

• In this case, hovering over the text will show a Tooltip with the complete cell text.

• In some cases, a row may contain more than one line. In this case the text will wrap accordingly.

Alignment

The instructions below refer to LTR languages. For RTL languages, left and right should be switched. See Text Formats.

• Column titles are left-aligned, except for single-icon column titles, which will be centered.

• Actions will be align to the left of the table's container.

• The search component and the number of items indicator will be aligned to the right of the table's container (unless otherwise specified)

• Within each cell:

  • Text will be aligned to the left of the column.

  • Numbers will be aligned to the right and have the same number of digits after the decimal point (where relevant).

  • Icons (either a single icon or a group of icons) will be aligned to the center.

  • Dates will be aligned to the left.

  • Cells with no applicable value will show the text N/A, aligned to the center.

  • Cells with no values yet will show the character -, aligned to the center.

For further information see Text Formats.

Number of Items Indicator

• The indicator will show the number of found items (before or after activating a search), as well as and the number of selected items, if relevant. For example: 9 items found, 3 selected.

• In case the items found are a subset of a larger group of items, the indicator will also show the total number of items. For example: 126 out of 2,500 items found.

• The number of selected items will include both visible items and items that are not visible at the moment (for example, selected items on the next page of results).

Internal logic

Sorting

• A table is always sorted by one of the columns.

• The sorted column is marked with a light background.

• The header of the column that the table is sorted by is marked with an icon, also indicating the order of the sort, ascending or descending (see example above).

Deleting Rows

• Where allowed:

  • Deleting any row, except for the last one, will select the next row.

  • Deleting the last row will select the new last row.

  • Deleting multiple rows will select the next row after the last selected row.

States

Table rows

In case of an interactive data table, table rows can have the following states:

Action column buttons

Buttons in the action column should only be visible according to the state of their table row, as shown below.

Interaction

Header row

• 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 Drag and Drop.

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

Columns menu

Clicking the drop-down icon on the right side of a header cell (if exists) will open an Action Menu, which may contain the following options:

• Sort Ascending

  • Clicking the item will sort the table in ascending order. In this case the ascending sort indicator will appear in the header cell, next to the title.

  • If the table is already sorted in ascending order, this item will be disabled.

• Sort Descending

  • Clicking the item will sort the table in descending order. In this case the descending sort indicator will appear in the header cell, next to the title.

  • If the table is already sorted in descending order, this item will be disabled.

• Columns (where relevant)

  • Clicking this item will open a Dual List Selector, allowing users to add, remove, and reorder columns.

Data rows

On Hover:

• Only one row can be in the hover state at any given time.

• If an action column exists, the action icons will show on hover.

• Additionally, each action icon should have a hover state of its own. For further information, see Buttons.

On Click:

• In case of selectable rows:

  • Clicking anywhere within a data row selects that row.

  • Clicking on another row will deselect all other rows.

  • The user may use the Ctrl (or Command) key to select more than one row.

• An exception to the above is clicking a link or an action icon inside a cell. Clicking a link will go to its target, and clicking an action will perform the action.

• If a checkbox column exists:

  • checking/unchecking any checkbox will select/deselect the row.

  • In this case, clicking a row-level action from the toolbar will perform the action on all selected items, even if they are not visible at that moment.

Previous row selections will not persist if the user navigates away and then returns to the table, e.g. to view the drill-down for a single table item.

On Double Click:

• If relevant, double clicking a row will perform the primary action related to that row (e.g. drilling down to edit the item).

Action Column

• Clicking an action on the action column selects the relevant row (while deselecting any other rows) before performing the action.

Search

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

Best practices

Use:

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

Don’t use:

• When each data object contains a small number of parameters → consider using a List.

General:

• Use short, single-line column titles.

• Avoid long texts inside table cells as possible.

• On the initial view of the table:

  • Don't show more than 10 columns.

  • If possible, the first row will be selected.

  • Columns should be ordered by importance or popularity, from left to right.

  • Set the column widths to fit typical data.

Accessibility compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Focus management

There are two levels of navigation within a table: row level and cell level.

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

       

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

Responsive design

Verint products should support all devices down to the common tablet size (960px width). For general guidelines, see Fundamentals - Responsive design.

Data tables must comfortably show all data on screen widths of 1366px and above.

For larger screen widths:

• the padding for each column may have a maximum width, to prevent excessively wide columns and ensure data is readable.

As the screen width narrows:

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

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.

• where there are mandatory or pinned columns, they are sticky and will remain visible as the user horizontally scrolls through the additional data columns.

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

Design

Code