...

...

...

...

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)

Disabled

In Focus

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 focusSelected

User can select one or more cells (see below)

Selected + In Focus

No Data

Error

See Field Validation

Interaction

• Clicking a cell will:

  • Sets select the focus to that cell.

  • Selects the cell

  • Deselects deselect all other cells.

  Double clicking a cell is similar to clicking a cell, but if the cell has text in it, double clicking

  • 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

  in the location of the cursor

  • on cursor location.

• Hitting the Enter key set the focus to the cell below the current cellwhen 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 sets the focus to the right of the current cell

• 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

• Typing text will enter the text to the cell that is in focus, replacing any other text in the cell

• A newly added text in a cell will be updated in the cell after losing focus (either by clicking another cell or using the Enter / Tab key)

• A cell in focus or a group of cells that were selected by dragging will show a distinctive point at the bottom-right corner of the cell / the selected area

• Dragging the point to other cells 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

...

Zeplin link

...

Screen thumbnail

...

<<Zeplin Link>>

...

<<Screen with 200 width>>

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
https://zpl.io/vMqknvn	Image Added
https://zpl.io/bl5NNJ1	Image Added
https://zpl.io/EmOYyJ8	Image Added

Code

...