Related Pages: Data Tables
| Table of Contents |
|---|
...
An inline editable table is a type of Data Table in which the user can edit data, 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:
Hovering a row will show an edit icon.
Clicking the edit icon:
Selects the entire 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 the action icons with two buttons: Apply (emphasized dialog button) and Cancel (regular dialog button). See Dialog Buttons.
The In edit mode, the user can enter values or update any input field, in any order.
When finished, the user can click on one of the two buttonshas two options:
Clicking the Apply button switches the row back to its original state, with the updated set of values.
Clicking the Cancel button (or Esc) switches the row back to its original state, with the original values.previous set of values (before making any changes).
Placement and Positioning
The width of the actions column should leave enough space for all options which will appear on editing, e.g. Apply and Cancel text buttons.
Validations and Errors
Long inputs in text fields will be treated as regular Text Fields, unless otherwise specified.
In edit mode, if the user clicks clicking on any other element on the page after changing any a field , will show a popup message will appear, warning about the potential data loss. In this case:
If the user chooses to continue keep 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.
In case the table is part of a form with its own Save and Cancel buttons and one of the rows is in edit mode:
Clicking the Save button will apply all changes that were made to that row (as if the user also clicked the Apply button).
Clicking the Cancel button will revert all the fields in that row to their previous values.
Best Practices
Use:
when the table is relatively simple (up to 8 columns).
Don’t use:
where selecting a row is the first step of a complex flow.
where the table contains more than 8 columns.
where one or more of the fields can hold large amounts of text.
...
By default, the first input field will be in focus.
The user can move See thefocus to the next or previous field using Tab or Shift+Tabmanagement sectionin the main data tables page for more information.
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
Zeplin link | Screen thumbnail |
|---|---|
 |
Code
...