Related Pages: Data Tables
| Table of Contents |
|---|
...
An Inline Editable table is a type of Data Table in which the user can edit data inside rows, without the need to navigate to a separate page, a panel, or a popup.
  |
Basic Flow
An editable table is similar to a standard Data Table, with these exceptions:
Clicking the edit icon in any row:
Selects that row (if not already selected).
Changes all relevant cells to input fields. This may include Text Fields, Drop-down Menus, Numeric Steppers, Date Pickers etc.
Replaces all action icons with two icons: confirm (✓) and cancel (X).
The user can enter or update any input field, in any order.
When finished, 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 (X) icon changes all input fields back to text, with the previous values.
...
Long inputs in table text fields will be managed as in regular Text Fields, unless otherwise specified.
In edit mode, if the user clicks on any other element on the page after changing any field, a popup message 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.
...
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
Zeplin link | Screen thumbnail |
|---|---|
 |
Code
...