Lead: Liav Nadler  DONE

Related Pages: Data Tables

Description

An editable table is a /wiki/spaces/UX/pages/283051242 in which the user can edit data inside a row, without the need to navigate to a separate page, a panel or a popup.

Basic Flow

• 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

Validations and Errors

• 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

Best Practices

• Use inline editing tables when the table is relatively simple

• Do not use inline editing tables when:

  • Selecting a row is the first step of a complex flow

  • The table contains more than 7-8 columns

  • One or more of the fields can hold large amounts of text

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 already set a general guidelines described in /wiki/spaces/UX/pages/308969693 >>

Screen reader support 

<<Make sure the components support screen reader for content or behaviour where needed - see /wiki/spaces/UX/pages/308248620 >>

Contrast & size compliance

<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>

Design

Code

<<a box containing the code - discuss with Femi>>