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

• Long texts in text fields will be managed as in regular text fields, unless otherwise specified (it is always a good practice to match the length of the field to the expected text)
• On edit mode, if the user clicked 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

...