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