Skip to end of banner
Go to start of banner

Dynamic Tables

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