Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 4 Next »

Lead:  Liav Nadler   ONGOING     

Related Pages: Data Tables

Description

A dynamic table is a type of a Data Table, allowing users to add, delete and reorder rows

Usage & Behaviour

Structure

  • The table is similar to an Inline Editing Table, including a header row and an action column

  • In addition, the dynamic table has a unique toolbar, including three icons:

    • Add new row

    • Move up

    • Move down

  • If the top row is selected, the move up icon is disabled

  • if the bottom row is selected, the move down icon is disabled

  • If no row is selected, the move up and move down icons are disabled

Zero State

  • In Zero state only two elements appear:

    • The toolbar (with the Add New Row icon enabled)

    • A short message: You can add items to the list by clicking the + icon above

Interaction

  • Clicking the Add New Row icon:

    • On zero state: creates a table with a single row in editing mode (see Inline Editing Tables)

    • Otherwise: creates a new row under the header row, in editing mode

  • Clicking the Move Up icon replaces the selected row with the row above it

  • Clicking the Move Down icon replaces the selected row with the row below it

  • For editing and deleting row see Inline Editing Tables

  • If the table becomes higher than the container is appears in, a scroll bar may appear

Best Practices

  • Use dynamic tables when the data is user generated, typically on settings forms

  • If the number of columns is greater than 5 consider using a static table instead of an inline editing table. In this case, clicking the Add New Row button will open a form or a dialog box

Accessibility compliance

<<In general each component should be A11y complied,  please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>

Focus management

<<How will the component work with keyboard only - without a mouse. Can be reference if written above

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

Zeplin link

Screen thumbnail

<<Short Zeplin link. You
Use this
>>

<<Screen with 200 width>>



Code

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

  • No labels