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

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility

Design

Code

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