Skip to end of banner
Go to start of banner

Spreadsheet Tables

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 34 Next »

Description

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

Usage & Behavior

General Guidelines

Structure

  • A spreadsheet table contains a grid of rows and columns, including:

    • a header row,

    • a header column,

    • a total row (optional).

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

Content

Numbers inside cells will be aligned to the right.

States

State

Example

Comments

Regular

Text Field.png

Hover

Text Field-3.png

Selected

Text Field-4.png

Disabled

Text Field-5.png

No Data

Text Field-6.png

Error

Text Field-1.png

See Field Validation.

Warning

Text Field-2.png

Focus

Focused.png

Only one cell can be in focus at any time.

Interaction

  • Clicking a cell will:

    • select the cell.

    • deselect all other cells.

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

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

  • 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

Code

  • No labels