Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Related Pages: Data Tables

Table of Contents

...

  • Hovering a row will show an edit icon.

  • Clicking the edit icon:

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

  • When finished, the user can click on one of the two buttons:

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

    • Clicking the Cancel button switches the row back to its original state, with the previous set of values (before making any changes).

Validations and Errors

  • Long inputs in text fields will be treated as regular Text Fields, unless otherwise specified.

  • In edit mode, if the user clicks clicking on any other element on the page after changing any a field , will show a popup message will appear, warning about the potential data loss. In this case:

    • If the user chooses to 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.

...