Lead:  Liav Nadler        

Related Pages: Data Tables

Description

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

Usage & Behaviour

Structure

• Typically, the dynamic 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 the table will show one row with blank fields, allowing the user to enter data right away

• In this case all icons will be disabled

Interaction

• Clicking the Add New Row icon 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 rows, see Inline Editing Tables

• The user will still be able to sort the table:

  • By default, the sorting icon will show on mouseover as usual

  • Clicking the header will toggle between sort ascending, sort descending and clear sorting

  • On clear sorting, the table will show the last order of rows

  • Re-ordering rows will override the any sort

• If the table becomes higher than its container, a scroll bar will appear

Best Practices

• Use dynamic tables when the data is user-generated

• In some cases, it is preferable to use a regular data table rather than an inline editing table. For more information see the best practices section under Inline Editing Tables

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

Code

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