Lead:  Liav Nadler  

Description

An spreadsheet table is a type of of data table where users can add and edit data on a spreadsheet-like grid

...

Usage & Behaviour

Structure

• The table contains a grid of rows and columns

• Rows and column may have headers

• If the table is higher than its container, a scroll bar will appear

States

• A cell can be in one of these states:

  • Normal (enabled)

  • Selected: The user can select a single cell or multiple cells (see below)

  • In Focus: Only one cell can be in focus at any time.

     By

     By default, the top-left cell is in focus

  • Selected + In Focus

  • Disabled

  • Missing Information

  • Alert

Interaction

• Clicking a cell:

  • Sets the focus to that cell

  • Selects the cell

  • Deselects all other cells

• Double clicking a cell is similar to clicking a cell, but if the cell has text in it, double clicking will place the insertion point in the location of the cursor

• Hitting the Enter key set the focus to the cell below the current cell

• Hitting the Tab key sets the focus to the right of the current cell

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

  • Dragging the cursor over a group of cell. In this case the first selected cell gets the focus

  • Clicking cells while holding the Ctrl / Cmd key. In this case the last selected cell gets the focus

• Typing text will enter the text to the cell that is in focus, replacing any other text in the cell

• A newly added text in a cell will be updated in the cell after losing focus (either by clicking another cell or using the Enter / Tab key)

• A cell in focus or a group of cells that were selected by dragging will show a distinctive point at the bottom-right corner of the cell / the selected area

• Dragging the point to other cells will copy the content of the cell to the target cells

• Adding / deleting rows and columns?

• Resizing rows and columns?

Edge Cases

• if the text typed in a cell is longer than the cell

• Restricting data while typing (e.g allow only digits)

• Missing information / errors

Accessibility compliance

<<In general each component should be A11y complied,  please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>

...

We already set a general guidelines described in /wiki/spaces/UX/pages/308969693 >> >>

Screen reader support 

 <<Make sure the components support screen reader for content or behaviour where needed - see /wiki/spaces/UX/pages/308248620 >>

...

<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>

Keyboard Operation

<<Explore and describe conventions>>

Design

Code

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