| Table of Contents |
|---|
Description
A spreadsheet Spreadsheet table is a type of data tableData Table where users can add and edit numeric data on within a grid.
...
Usage &
...
Behavior
General Guidelines
Structure
The A spreadsheet table contains a grid of rows and columnsThe table may contain, including:
Header a horizontal header row
Header a vertical header column
Total rowa total row (optional).
If the table is higher larger than its container, a scroll bar horizontal and/or vertical scrollbar will appear. The scroll bar will not affect Both the header and title rows, if existsrow/column and the total row (if exists) will be pinned.
Content
Numbers inside
...
cells will be aligned to the right.
States
State | Example | Comments |
|---|
Normal (Enabled)
Mouseover
Selected
In Focus (edit mode)
Only one cell can be in focus at any time
Disabled
No Data
Error
See Field Validation
Interaction
Clicking a cell:
Selects the cell
Deselects all other cells
Sets the focus to the cell, allowing the user to edit it
If the cell is already in focus, clicking the cell will place the insertion point on cursor location
Hitting the Enter key when a cell is selected or in focus:
Saves the text in the cell (if exists)
Switches the cell from edit mode to selected
Hitting the Tab key / the arrow keys when a cell is selected or in focus:
Saves the text in the cell (if exists)
Deselects the cell
Moves the focus to the relevant next cell, while skipping disabled cells
Dragging the cursor over a group of cells selects that group of cells
A cell in focus will have a special handle at the bottom-right corner (see states above)
Mouseover the handle will switch the cursor to a cross
Dragging the handle will copy the content of the cell to the target cells
The user can cut, copy and paste cell content using Ctrl / Cmd + X, C and V respectably
Validations and Errors
Errors may include:
Typing long text in a cell
Typing invalid data in a cell
Deleting mandatory cells
For more information please refer to the Field Validation page
Best Practices
...
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 either one cell or 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.
Cutting read-only cells will not be allowed. If the user selects read-only cells and then tries to cut them, 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.
This will happen when the user did one of the following:
Selected a smaller number of cells as the target (except for selecting one cell, which will not cause this)
Selected one cell but the row/column doesn’t have enough room to accomodate all the pasted cells.
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.
Dragging to copy on cells that include at least one read-only cells will display an error message.
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 |
|
Shift + Tab |
|
Space |
|
Enter |
|
Esc |
|
Arrows |
|
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 |
|---|
<<Zeplin Link>>
<<Screen with 200 width>>
Code
...
Code
...