Lead: Liav Nadler Status colour Yellow title ongoing
Related Pages: Data Tables
| Table of Contents |
|---|
Description
An editable table is a data table in which the user can edit data inside the any row, without the need to navigate to a separate page, panel or popup
Usage & Behaviour
General guidelines
Structure
- A description of the structure of the component, including areas, sub-components etc.
Placement and Positioning
- For example, in popups and toast messages
Default State
- When there is more than one state for a control or area
States
<<e.g. active disabled, error, hover, temporary (spinner size), empty etc...>>
Interaction
- Clicking the
Best practices
<<e.g. Slider should display a label its on>>
Basic Flow
- An editable table is similar to a basic table, with an exception described below:
- Clicking the edit icon in any row:
- Selects that row (if not already selected)
- Changes all relevant cells of that row to input fields, allowing the user to enter text in text fields or select values in dropdown menus
- Replaces the edit icon with two icons: confirmation (V) and cancellation (X)
- They user may enter or update any input field, in any order
- The first input field will be selected by default
- The user can move the focus to the next or previous field using Tab / Shift+Tab
- Clicking Enter when the focus is on a text field changes all input fields back to text, with the updated values
- When done the user can click on one of the two icons:
- Clicking the confirmation icon changes all input fields back to text, with the updated values
- Clicking the cancellation icon changes all input fields back to text, with the previous values
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>>
...