Lead: Liav Nadler
| Status | ||||
|---|---|---|---|---|
|
Related Pages: Data Tables
| Table of Contents |
|---|
...
An editable table is similar to a basic table, with the exceptions 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 (this may include text fields, dropdown menus, spinners, date pickers etc.)
Replaces all action icons with two icons: confirm (V) and cancel (X)
The user can enter or update any input field, in any order
When done the user can click on one of the two icons:
Clicking the confirm icon changes all input fields back to text, with the updated values
Clicking the cancel icon changes all input fields back to text, with the previous values
...
Validations and Errors
Long texts in text fields will be managed as in regular text fields, unless otherwise specified (it is always a good practice to match the length of the field to the expected text)
On edit mode, if the user clicked on any other element on the page after changing any field, a popup window will appear, warning about the potential data loss.
In this case:If the user chooses to continue editing, the popup will close, and the page will auto-scroll to the relevant row, if needed
If the user chooses to close and discard changes, the row will switch back to normal mode, with the previous set of values
...
...
Best Practices
Use inline editing tables when the table is relatively simple
Do not use inline editing tables when:
Selecting a row is the first step of a complex flow
The table contains more than 7-8 columns
One or more of the fields can hold large amounts of text
Accessibility compliance
Focus management
...