Description

An editable table is a data table in which the user can edit data inside any row, without the need to navigate to a separate page, panel or popup

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

Focus management

<<How will the component work with keyboard only - without a mouse. Can be reference if written above

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

Contrast & size compliance

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

Design

Zeplin link	Screen thumbnail
<<Short Zeplin link. You Use this >>	<<Screen with 200 width>>

Code

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

Editable Tables