Related Pages: Data Tables

Description

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

Open

Usage & Behavior

General Guidelines

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 (optional)

  • Move down (optional)

• 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 immediately enter new data.

• In this case the action icons will be disabled, until the first input.

Open

Interaction

• Clicking the Add New Row icon creates a new row underneath 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 hover.

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

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

  • Re-ordering rows will override any sort.

• If the table becomes higher than its container, a Scrollbar will appear.

Best Practices

• Use dynamic tables when the data is user-generated.

• 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