Lead: Liav Nadler  

Related Pages: Data Tables

Description

...

• 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

Edge Cases

• On edit mode, if the user clicked on any other element on the page a popup window will appear, warning about the potential data loss. In this case:
  • If the user chooses to cancel the popup will close
  • If the user chooses to continue the row will switch back to normal mode, with the previous set of values

Accessibility compliance

Focus management

On 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 / Shift+Tab
• Clicking Enter when the focus is on a text field will change all input fields back to text, with the updated value

We <<We already set a general guidelines described in /wiki/spaces/UX/pages/308969693 >>

...