Related Pages: Data Tables
| Table of Contents |
|---|
...
A dynamic table is a type of Data Table which allows users to add, delete, and reorder rows.
  |
Usage & Behavior
...
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.
  |
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.
...
Zeplin link | Screen thumbnail |
|---|---|
  |
Code
...