Lead:  Liav Nadler  ONGOING

Description

A spreadsheet table is a type of data table where users can add and edit numeric data on a grid

Usage & Behaviour

General Guidelines

Structure

• The table contains a grid of rows and columns

• The table may contain:

  • Header row

  • Header column

  • Total row

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

Content

• Numbers inside cell 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

• 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

Code

<<a box containing the code - discuss with Femi>>