Lead:  Liav Nadler  

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 (on the left)

  • Total row (at the bottom)

• 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

• A Numbers inside cell can be in one of these states:will be aligned to the right

States

State	Example	Comments
Normal (Enabled)
Mouseover
Selected
Selected + In Focus (edit mode)		Only one cell can be in focus at any time. By default, the top-left cell is in focus
Disabled
No Data
Error		See Field Validation

Interaction

• Clicking a cell:

  Sets the focus to the cell

  • Selects the cell

  • Deselects all other cells

  • If Sets the focus to the cell contains text - selects the text, allowing the user to edit it

  Double clicking a

  • If the cell is

  similar to clicking a cell, but if the cell has text in it, it

  • already in focus, clicking the cell will place the insertion point

  in the cursor’s location. Currently they are same

  • on cursor location

• Hitting the Enter/ Tab key key when a cell is selected or in focus:

  • Saves the text in the cell (if exists)

  • Sets the focus to the cell below / to the right of the current cell respectably, while skipping disabled cells. Currently Enter deselects the cell but keeps the focus

  • If the new cell contains text - selects the text

  • If the new cell does not contain text - showing the insertion point, allowing the user to enter text

  Selecting multiple cells can be done in one of two ways:

  • 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

  cell. In this case the first selected cell gets the focus - currently ExtJS only marks the cell

• Clicking cells while holding the Ctrl / Cmd key. In this case the last selected cell gets the focus - currently does not work in ExtJS

Shift to select group of cells - currently does not work in ExtJS

cells selects that group of cells

• A cell in focus or a group of cells that were selected by dragging will show will have a special handle at the bottom-right corner of the cell / the selected area (see image) - in ExtJS works only on a single cellstates 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

Edge Cases

...

Validations and Errors

• Errors may include:

  • Typing long text in a cell

  • Typing invalid data in a cell

  • Deleting mandatory cellsServer error when trying to save cell content

• For more information please refer to the Field Validation page

Best Practices

• Use a spreadsheet table When when it supports another set of data, for example, a graph

...