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

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

Design

Code

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