Description

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

Usage & Behavior

General Guidelines

Structure

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

  • a horizontal header row

  • a vertical header column

  • a total row (optional).

• If the table is larger than its container, a horizontal and/or vertical scrollbar will appear. Both the header row/column and the total row (if exists) will be pinned.

Content

Numbers inside cells will be aligned to the right.

States

State	Example	Comments
Regular
Hover
Focused + Selected
Read only
No Data
Error		See Field Validation.
Warning
User edit (optional)		Indicates that the value in the cell was manually edited without saving.
Algorithm recalculation (optional)		Indicates that the value in the cell was automatically recalculated due to a function, as a result of another cell whose value was manually edited without saving.
Comment (optional)		Indicates that the cell contains a comment.

Interaction

Selection and focus

Single selection

• Clicking a cell (or navigating to a cell using the keyboard) will:

  • select and focus the cell.

  • deselect all other cells.

  • if the cell is not empty and not read only, its content will be highlighted.

• Header cells will receive focus via keyboard navigation without selection.

Multiple selection

• Selecting a row

  • Clicking on the header cell of a row will select the row.

  • Selecting multiple rows

    • Ctrl key (Windows) or Command key (Mac) + Click will allow to select multiple rows one by one

    • Shift + Click will be used to select a range of rows.

    • Repeating these actions on selected rows should de-select these rows.

• Selecting a column

  • Clicking on the header cell of a column, or pressing Enter when it’s focused, will select the column.

  • The rest of the guidelines remain the same as when selecting a row.

• Selecting a range of cells

  • This can be done by:

    • Dragging (from a single cell only)

      • While holding down the left mouse button on a cell, drag the mouse cursor over the desired cells.

      • While dragging, a rectangular outline around the range of cells that will be selected will be shown.

    • Using the Shift key

      • Selecting a cell.

      • While holding the Shift key, clicking on another cell. The range of cells in between these two cells will be selected.

• Selecting non-adjacent cells

  • Selecting the first cell or range: Click on the first cell (or drag to select a range of cells).

  • Holding the Ctrl/Cmd key (Mac) while clicking additional cells or ranges

  • The cells will get selected.

    • For single cells, if the user performs the action again cells will get deselected.

    • If the user drags and there’s an overlap between groups of cells, the overlapping cells will remain selected.

Other selection guidelines

• Navigation with one of the arrow keys while a group of cells is selected will undo the selection and move the selection to the cell that is next to the top leftmost cell in the group.

• In multiple selection - cell content, if exists, will not be highlighted.

Edit

• When a cell is focused its content is highlighted and typing will replace the existing content.

• If the cell is already in focus, clicking the cell will place the insertion point on cursor location.

• If more than one cell is selected, the user will not be able to edit.

  • If the user tries to type, a popup will be shown that informs them that multiple cells cannot be edited

    • For the popup header - If the cells have a specific name, the specific name should be used (e.g. “20 Intervals Selected”).

• Navigating away from a cell will save its content.

• In edit mode, hitting the Esc key will discard the edit and revert the cell to the previous value.

Copy and paste

• The user will be able to cut, copy, and paste cell content in one of two ways:

  • Using Ctrl/Cmd + X, C and V respectively.

    • If the user performed a copy/cut on several cells, and then, as the target for pasting, selected more cells than the number of the copied/cut cells - the cells will be pasted in the same number and formation as the original, from the first target cell.

    • Copying non-adjacent cells will not be allowed. If the user selects non-adjacent cells and then tries to copy or cut, an error message will be displayed.

    • 

       

    • Trying to paste on cells that include at least one read only cell will display an error message.

    • 

       

    • Trying to paste on a smaller number of cells than the copied number of cells will display an error message.

    • 

       

  • Using dragging to copy

    • A focused cell will have a special handle in the bottom-right corner. The mouse cursor when hovered will be a black plus (see Excel)

    • Dragging the handle of the cell will copy the content of the cell to each dragged over cell. This will be allowed horizontally or vertically only.

Comments on cells (optional)

Users will be able to enter comments, edit comments, add to comments and delete comments. This will be done using toolbar actions.

Tooltips on hover (optional)

On hover, a tooltip will be shown above the relevant cell.

Best Practices

Use:

• when there is a need to edit data within a large data set.

• when the table supports a visualization, such as a graph.

Accessibility compliance

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

Focus management

Some behaviors are different from regular data tables:

• Selection and Focus states are identical and always move together (except header cells which are focusable without selection).

• When a single cell is in focus the user can immediately input data.

Design

Zeplin link	Screen thumbnail
https://zpl.io/vMqknvn
https://zpl.io/bl5NNJ1
https://zpl.io/EmOYyJ8

Code