State
Image
Comment
Regular
Hover
Selected
Selected, Hover
Focused
Focused, Hover
Focused, Selected
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.
Type | Usage |
|---|---|
Basic Data Tables | The most common table, displaying data on a grid. |
Where inline editing is needed. | |
For presenting hierarchical data. | |
Where rows contain additional textual information, relevant across all columns. | |
Allows users to quickly edit data in cells. | |
Allows users to add and delete rows. |
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
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.
Whether actions are displayed in the table’s Action column or Toolbar depends on its multi-select behavior.
Action type | Include in action column | Include in toolbar | Include in details pane (where shown) |
|---|---|---|---|
Can be performed only on a single row (e.g. Edit) | ✓ | x |
Actions will disappear when more than one row is selected. |
Can be performed on either single or multiple rows (e.g. Delete) | ✓ When multiple rows are selected, a confirmation dialog will be shown asking whether to perform the action only on the single row where the action was selected, or on all selected rows. Only one confirmation message should be shown, even for destructive actions such as Delete.
| ✓ |
|
Can be performed only on multiple rows (e.g. Merge) | x | ✓ Disabled until multiple rows selected. |
|
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.
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),
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).
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.
In case of an interactive data table, table rows can have the following states:
State | Image | Comment |
|---|---|---|
Regular | | |
Hover | | |
Selected | | |
Selected, Hover | | |
Focused | | |
Focused, Hover | | |
Focused, Selected | |
Buttons in the action column should only be visible according to the state of their table row, as shown below.
Row state | On single-select | On multi-select |
|---|---|---|
Regular | X | X |
Hover | ✓ | ✓ |
Focus | ✓ | ✓ |
Selection | ✓ | X |
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 /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).
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.
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.
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
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 prioritised.
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 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).
Wide | Standard | Narrow | Very narrow |
|---|---|---|---|
 |  |  |  |
Zeplin link | Screen thumbnail |
|---|---|
  |
