Related Pages: Data Tables

Description

An Inline Editable 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:

• Hovering a row will show an edit icon.

• Clicking the edit icon in any row:

  • Selects that 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 action icons with two iconsbuttons: confirm  Apply (✓emphasized button) and cancel (X) Cancel (regular dialog button). See Dialog Buttons.

• The user can enter or update any input field, in any order.

• When finished, the user can click on one of the two iconsbuttons:

  • Clicking the confirm (✓) icon changes all input fields back to textthe Apply button switches the row back to its original state, with the updated values.

  • Clicking the cancel (X) icon changes all input fields back to text Cancel button switches the row back to its original state, with the previous original values.

Validations and Errors

• Long inputs in table text fields will be managed treated 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.

...

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

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

...