Description

A Spreadsheet table is a type of Data Table where users can add and edit numeric data within a grid.

Usage & Behavior

General Guidelines

Structure

A spreadsheet table contains a grid of rows and columns, including:
- a horizontal header row
- a vertical header column
- a total row (optional).
If the table is larger than its container, a horizontal and/or vertical scrollbar will appear. Both the header row/column and the total row (if exists) will be pinned.

Content

Numbers inside cells will be aligned to the right.

States

State	Example	Comments
Regular
Hover
Focused + Selected
Read only
No Data
Error		See Field Validation.
Warning
User edit (optional)		Indicates that the value in the cell was manually edited without saving.
Algorithm recalculation (optional)		Indicates that the value in the cell was automatically recalculated due to a function, as a result of another cell whose value was manually edited without saving.
Comment (optional)		Indicates that the cell contains a comment.

Interaction

Selection and focus

Single selection

Clicking a cell (or navigating to a cell using the keyboard) will:
- select and focus the cell.
- deselect all other cells.
- if the cell is not empty and not read only, its content will be highlighted.
Header cells will receive focus via keyboard navigation without selection.

Multiple selection

Selecting a row
- Clicking on the header cell of a row will select the row.
- Selecting multiple rows
  - Ctrl key (Windows) or Command key (Mac) + Click will allow to select multiple rows one by one
  - Shift + Click will be used to select a range of rows.
  - Repeating these actions on selected rows should de-select these rows.

Selecting a column
- Clicking on the header cell of a column, or pressing Enter when it’s focused, will select the column.
- The rest of the guidelines remain the same as when selecting a row.

Selecting a range of cells
- This can be done by:
  - Dragging (from a single cell only)
    - While holding down the left mouse button on a cell, drag the mouse cursor over the desired cells.
    - While dragging, a rectangular outline around the range of cells that will be selected will be shown.
  - Using the Shift key
    - Selecting a cell.
    - While holding the Shift key, clicking on another cell. The range of cells in between these two cells will be selected.

Selecting non-adjacent cells
- Selecting the first cell or range: Click on the first cell (or drag to select a range of cells).
- Holding the Ctrl/Cmd key (Mac) while clicking additional cells or ranges
- The cells will get selected.
  - For single cells, if the user performs the action again cells will get deselected.
  - If the user drags and there’s an overlap between groups of cells, the overlapping cells will remain selected.

Other selection guidelines

Navigation with one of the arrow keys while a group of cells is selected will undo the selection and move the selection to the cell that is next to the top leftmost cell in the group.
In multiple selection - cell content, if exists, will not be highlighted.

Edit

When a cell is focused its content is highlighted and typing will replace the existing content.
If the cell is already in focus, clicking the cell will place the insertion point on cursor location.
If more than one cell is selected, the user will not be able to edit.
- If the user tries to type, a popup will be shown that informs them that multiple cells cannot be edited
  - For the popup header - If the cells have a specific name, the specific name should be used (e.g. “20 Intervals Selected”).

Navigating away from a cell will save its content.
In edit mode, hitting the Esc key will discard the edit and revert the cell to the previous value.

Copy and paste

The user will be able to cut, copy, and paste cell content in one of two ways:
- Using Ctrl/Cmd + X, C and V respectively.
  - If the user performed a copy/cut on several cells, and then, as the target for pasting, selected more cells than the number of the copied/cut cells - the cells will be pasted in the same number and formation as the original, from the first target cell.
  - Copying non-adjacent cells will not be allowed. If the user selects non-adjacent cells and then tries to copy or cut, an error message will be displayed.
  - Trying to paste on cells that include at least one read only cell will display an error message.
  - Trying to paste on a smaller number of cells than the copied number of cells will display an error message.
- Using dragging to copy
  - A focused cell will have a special handle in the bottom-right corner. The mouse cursor when hovered will be a black plus (see Excel)
  - Dragging the handle of the cell will copy the content of the cell to each dragged over cell. This will be allowed horizontally or vertically only.

Comments on cells (optional)

Users will be able to enter comments, edit comments, add to comments and delete comments. This will be done using toolbar actions.

Tooltips on hover (optional)

On hover, a tooltip will be shown above the relevant cell.

Best Practices

Use:

when there is a need to edit data within a large data set.
when the table supports a visualization, such as a graph.

Accessibility compliance

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

Focus management

Some behaviors are different from regular data tables:

Selection and Focus states are identical and always move together (except header cells which are focusable without selection).
When a single cell is in focus the user can immediately input data.

Keyboard	Description
Tab	From a previous component, the first cell in the top row will be focused. If the user had previously navigated in the table: If the user previously selected a single cell, returning navigation to the table will focus on this cell. If the user previously selected multiple cells, returning navigation to the table will focus on the first cell in the top row. From any cell in the table, focus will move to the next component on the screen. Where header cells are focusable, tab will move the focus to the first cell of the header row.
Shift + Tab	From the next component, the first cell in the top row will be focused. If the user had previously navigated in the table: If the user previously selected a single cell, returning navigation to the table will focus on this cell. If the user previously selected multiple cells, returning navigation to the table will focus on the first cell in the top row. From any cell in the table, the focus will move to the previous component on the screen.
Space	When a cell is focused but not in edit mode - will delete its content (if exists), and locate the cursor inside the cell. When a cell is in edit mode: Number cells: N/A. Alpha-numeric cells: used as text entry.
Enter	When a cell is focused, will move the focus down one cell. Any edits will be kept. When on the bottom row, the focus will remain on the cell, and the cell will change from edit view to highlight view.
Esc	In edit mode: Discards any edits and reverts to the previous value. Otherwise: N/A
Arrows	Move the focus between cells accordingly. When multiple cells are selected, focus will move to the next (according to the direction of the clicked arrow) cell after the top left most cell. Right/Left from the most right and most left rows will not move the focus. Up/Down from the top and bottom rows will not move the focus. When in edit mode, arrows behave as in regular Text fields.
Shift + Arrows	Selects additional cells.
Ctrl + Shift + Arrows	Selects the entire row or column accordingly.
Home	Moves the focus to the first cell in the first row in the table.
End	Moves the focus to the last cell in the table.
F2 / fn+F2	Puts the cell into edit mode (cursor located at the end of the characters) without highlighting the existing value.

Design

Zeplin link	Screen thumbnail
https://zpl.io/vMqknvn
https://zpl.io/bl5NNJ1
https://zpl.io/EmOYyJ8

Code

Verint LUX Design System > Spreadsheet Tables > Soon_Progress_line_det_ani.gif