...

...

...

Description

A spreadsheet Spreadsheet table is a type of data tableData Table where users can add and edit numeric data on a within the grid.

...

Usage &

...

Behavior

General Guidelines

Structure

• The A spreadsheet table contains a grid of rows and columnsThe table may contain, including:

  • Header a header row,

  • Header column (on the left)

  • Total row (at the bottom)a header column,

  • a total row (optional).

• If the table is higher than its container, a scroll bar Scrollbar will appear. The scroll bar scrollbar will not affect the header and or title rows, if existsexist.

States

...

Content

Numbers inside cells will be aligned to the right.

States

State	Example	Comments

Normal (Enables)

Image Removed

Disabled

Image Removed

In Focus

Image Removed

Regular	Image Added
Hover	Image Added
Selected	Image Added
Disabled	Image Added
No Data	Image Added
Error	Image Added	See Field Validation.
Warning	Image Added
Focus	Image Added	Only one cell can be in focus at any time.

 By default, the top-left cell is in focus
Handle?

Selected

Image Removed

User can select one or more cells (see below)

Selected + In Focus

No Data

Error

Image Removed

See Field Validation

Interaction

• Clicking a cell will:

  • Sets the focus to select the cell.

  • Selects the cell

  • Deselects deselect all other cells.

  • If change the cell contains text - selects the textto an input field, allowing the user to edit it.

  Double clicking a

  • If the 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 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 when a cell is selected or focused will:

  • save the text in the cell (if it exists)Sets .

  • deselect the cell.

  • move the focus to the next cell below / (to the right of the current cell respectablyone), 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:

  • 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

  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

cells selects that group of cells.

• A cell in focus or a group of cells that were selected by dragging will show focused cell will have a special handle at in the bottom-right corner of the cell / the selected area (see image)

  Mouseover

  . 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.

• 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

  respectively.

Validations and Errors

Errors may be triggered by:

• typing long text in a cell.

• Typing

  typing invalid data in a cell.

• Deleting

  deleting mandatory cells

  Server error when trying to save cell content

  .

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, for example, such as 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

<<a box containing the code - discuss with Femi>>Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Design

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

Code

...