...
...
...
...
| Status | ||||
|---|---|---|---|---|
|
| 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 column (on the left)
Total row (at the bottom)a vertical header column
a 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 exists
States
A cell can be in one of these states: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 |
|---|
Normal (Enables)
Disabled
In Focus
Only one cell can be in focus at any time. By default, the top-left cell is in focus
Selected
User can select one or more cells (see below)
Regular |  | |
Hover |  | |
Focused + Selected |  | |
Read only |  | |
No Data |  | |
Error |  | See Field Validation |
Interaction
Clicking a cell:
Sets the focus to the cell
Selects the cell
Deselects all other cells
If the cell contains text - selects the text, allowing the user to edit it
Double clicking a cell is similar to clicking a cell, but if the cell has text in it, it will place the insertion point in the cursor’s location
Hitting the Enter / Tab key:
Saves the text in the cell (if exists)
Sets the focus to the cell below / to the right of the current cell respectably, while skipping disabled cells
If the new cell contains text - selects the text
If the new cell does not contain text - showing the insertion point, allowing the user to enter text
Selecting multiple cells can be done in one of two ways:
Dragging the cursor over a group of cell. In this case the first selected cell gets the focus
Clicking cells while holding the Ctrl / Cmd key. In this case the last selected cell gets the focus
Shift to select group of cells
A cell in focus or a group of cells that were selected by dragging will show a special handle at the bottom-right corner of the cell / the selected area (see image)
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 use cut, copy and paste cell content using Ctrl / Cmd + X, C and V respectably
Edge Cases
Edge cases may include:
Typing long text in a cell
Typing invalid data in a cell
Deleting mandatory cells
Server error when trying to save cell content
For more information please refer to the Field Validation page
Best Practices
Use a spreadsheet table When it supports another set of data, for example, a graph
Accessibility compliance
<<In general each component should be A11y complied, please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>
Focus management
<<How will the component work with keyboard only - without a mouse. Can be reference if written above
We already set a general guidelines described in /wiki/spaces/UX/pages/308969693 >>
Screen reader support
<<Make sure the components support screen reader for content or behaviour where needed - see /wiki/spaces/UX/pages/308248620 >>
Contrast & size compliance
<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>
Keyboard Operation
<<Explore and describe conventions>>
Design
...
Zeplin link
...
Screen thumbnail
...
<<Zeplin Link>>
...
<<Screen with 200 width>>
Code
...
. | ||
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 be unselected.
...
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.
Pasting to non-adjacent cells will not be allowed. If the user tries to paste into non-adjacent cells, 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 |
|---|---|
 | |
 | |
 |
Code
...