Lead: Liav Nadler  

Description

An inline editable table is a /wiki/spaces/UX/pages/283051242 type of Data Table 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 Removed

...

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

    of that row

    to input fields

    (this

    . This may include

    text fields, dropdown menus, spinners, date pickers etc.)Replaces all

    Text Fields, Drop-down Menus, Numeric Steppers, Date Pickers etc.

  • Replaces the action icons with two

    icons

    buttons:

    confirm

    Apply (

    V

    emphasized dialog button) and

    cancel

    Cancel (

    X) 
  The

  • regular dialog button). See Dialog Buttons.

• In edit mode, the user can enter values or update any input field, in any order.

• When

  done

  finished, the user

  can click on one of the two icons

  has two options:

  Long texts

  • Clicking

    the confirm icon changes all input fields back to text

    Apply switches the row back to its original state, with the updated set of values.

  • Clicking

    the cancel icon changes all input fields back to text

    Cancel (or Esc) switches the row back to its original state, with the previous set of values

Edge Cases

• • (before making any changes).

Placement and Positioning

The width of the actions column should leave enough space for all options which will appear on editing, e.g. Apply and Cancel text buttons.

Validations and Errors

• Long inputs in text fields will be

  managed

  treated as

  in

  regular

  text fields

  Text Fields, unless otherwise specified

  (it is always a good practice to match the length of the field to the expected text)On

  .

• In edit mode,

  if the user clicked

  clicking on any

  other

  element on the page after changing

  any

  a field

  ,

  will show a popup

  window will appear

  message, warning about the potential data loss.

  
  

  In this case:

  • If the user chooses to

    continue

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

• In case the table is part of a form with its own Save and Cancel buttons and one of the rows is in edit mode:

  • Clicking the Save button will apply all changes that were made to that row (as if the user also clicked the Apply button).

  • Clicking the Cancel button will revert all the fields in that row to their previous values

...

• • .

Best Practices

Use:

• when the table is relatively simple (up to 8 columns).

Don’t use:

• where selecting a row is the first step of a complex flow.

• where the table contains more than 8 columns.

• where one or more of the fields can hold large amounts of text.

Accessibility compliance

Focus management

On In edit mode:

• By default, the first input field will be in focus.

• The user can move

  See thefocus

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

• management sectionin the main data tables page for more information.

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

Design

Code

...

https://zpl.io/29Wxw6z

Image Added

Code

...