Lead: Liav Nadler
| Status | ||||
|---|---|---|---|---|
|
Related Pages: Data Tables
| Table of Contents |
|---|
...
A dynamic table is a type of data tablea Data Table, allowing users to add, delete and reorder rows
...
Usage & Behaviour
Structure
The table may be is similar to a data tablean Inline Editing Table, including a header row and an action column
The action column contains a delete option
In addition, the dynamic table has a unique toolbar, including three icons:
Add new row
Move up
Move down
If no the top row is selected, the move up and move down options are icon is disabledIf
if the top bottom row is selected, the move up option down icon is disabledif the bottom
If no row is selected, the move up and move down option is disabledicons 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
Zero State
...
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>>
...