Lead: Liav Nadler  

Related Pages: Data Tables

...

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.

...

Image Modified

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

...

• 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>>Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility

Design

...