Related Pages: Data Tables
| Table of Contents |
|---|
Description
An editable table is a /wiki/spaces/UX/pages/283051242 Data Table in which the user can edit data inside a row, without the need to navigate to a separate page, a panel, or a popup.
...
Basic Flow
An editable table is similar to a basic table, with
...
these exceptions
...
:
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 . This may include text fields, dropdown drop-down menus, spinners, date pickers etc.)
Replaces all action icons with two icons: confirm confirm (V✓) and cancel cancel (X) .
The user can enter or update any input field, in any order.
When done finished, the user can click on one of the two icons:
Clicking the confirm icon confirm (✓) icon changes all input fields back to text, with the updated values.
Clicking the cancel icon cancel (X) icon changes all input fields back to text, with the previous values.
Validations and Errors
Long texts inputs in table text fields will be managed as in regular text fields Text Fields, unless otherwise specified. (it It is always a good practice to match the length of the field to the expected text).
On In edit mode, if the user clicked clicks 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
...
:
when the table is relatively simple.Do not use inline editing tables when
Don’t use:
- Selecting
where selecting a row is the first step of a complex flow.
- The
where the table contains more than
7-8 columns.
- One
where one or more of the fields can hold large amounts of text.
Accessibility compliance
Focus management
On In edit mode:
By default, the first input field will be in focus.
The user can move the focus to the next or previous field using Tab / or Shift+Tab.
Clicking Enter when the focus is on a text field will field will change all input fields back to text, with the updated valuevalues.
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
Zeplin link | Screen thumbnail |
|---|---|
<<Short Zeplin link. You | <<Screen with 200 width>> |
...