...
...
...
...
| colour | Yellow |
|---|---|
| title | ongoing |
| Table of Contents |
|---|
Description
An spreadsheet A Spreadsheet table is a type of data tableof Data Table where users can add and edit data on a spreadsheet-like grid
...
numeric data within the grid.
...
Usage &
...
Behavior
General Guidelines
Structure
- The
A spreadsheet table contains a grid of rows and columns
Rows and column may have headers, including:
a header row,
a header column,
a total row (optional).
If the table is higher than its container, a
scroll bar will appear
States
- A cell can be in one of these states:
- Normal (enabled)
- Selected: The user can select a single cell or multiple cells (see below) In Focus:
Scrollbar will appear. The scrollbar will not affect the header or title rows, if exist.
Content
Numbers inside cells will be aligned to the right.
States
State | Example | Comments |
|---|---|---|
Regular |  | |
Hover |  | |
Selected |  | |
Disabled |  | |
No Data |  | |
Error |  | See Field Validation. |
Warning |  | |
Focus |  | Only one cell can be in focus at any time. |
...
...
Interaction
Clicking a cell will:
...
select the
...
cell.
...
deselect all other cells.
...
change the cell to an input field, 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 focused will:
save the text in the cell (if it exists).
exit edit mode, returning the cell to the selected state.
Hitting the Tab key
...
- 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
...
when a cell is selected or focused will:
save the text in the cell (if it exists).
deselect the cell.
move the focus to the next cell (to the right of the current one), while skipping disabled cells. If the focused cell is the last one on the row, hitting Tab will set the focus to the first cell of the next row.
Dragging the cursor over a group of cells selects that group of cells.
A focused cell will have a special handle in the bottom-right corner. See States above.
Hovering over the handle will switch the cursor to a cross.
Dragging the handle will copy the content of the cell to the target cells
...
Edge Cases
- if the text typed in a cell is longer than the cell
- Restricting data while typing (e.g allow only digits)
- Missing information / errors
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
...
Code
...
.
The user can cut, copy, and paste cell content using Ctrl / Cmd + X, C and V respectively.
Validations and Errors
Errors may be triggered by:
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
Use:
when there is a need to edit data within a large data set.
when the table supports another set of data, such as a graph.
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
Zeplin link | Screen thumbnail |
|---|---|
 | |
 | |
 |
Code
...