...

...

...

...

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 a header column,

  • Total rowa 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.

Content

Numbers inside

...

cells will be aligned to the right.

States

Selected

Image Removed

In Focus (edit mode)

Image Removed

State	Example	Comments

Normal (Enabled)

Image Removed

Mouseover

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

Disabled

Image Removed

No Data

Image Removed

Error

Image Removed

See Field Validation

.

Interaction

• Clicking a cell will:

  • Selects select the cell.

  • Deselects deselect all other cells.

  • Sets change the focus to the cellcell 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 in focusfocused will:

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

  • Switches exit edit mode, returning the cell from edit mode to the selected state.

• Hitting the Tab key / the arrow keys when a cell is selected or in focusfocused will:

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

  • Deselects deselect the cell.

  • Moves move the focus to the relevant 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 in focus will have a special handle at in the bottom-right corner (see states above)

  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 cut, copy, and paste cell content using Ctrl / Cmd + X, C and V respectably respectively.

Validations and Errors

Errors may

...

be triggered by:

• Typing

  typing long text in a cell.

• Typing

  typing invalid data in a cell.

• Deleting

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

Accessibility compliance

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

Design

Code

...

https://zpl.io/vMqknvn	Image Added
https://zpl.io/bl5NNJ1	Image Added
https://zpl.io/EmOYyJ8	Image Added

Code

...