Lead: Liav Nadler
| Status | ||||
|---|---|---|---|---|
|
| Table of Contents |
|---|
Description
A dynamic table is a type of a Data Table, allowing which allows users to add, delete, and reorder rows.
...
Usage &
...
Behavior
General Guidelines
Structure
The 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 Move up icon is disabled.
if If the bottom row is selected, the move Move down icon is disabled.
If no row is selected, the move Move up and move Move down icons 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
...
, 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 :
On zero state:creates a
table with a single row in editing mode (see Inline Editing Tables)Otherwise: creates anew row
underunderneath 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 row 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 the its container is appears in, a scroll bar may Scrollbar will 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>>
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
...
.
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
Zeplin link | Screen thumbnail |
|---|
<<Short Zeplin link. You
Use this 
>>
<<Screen with 200 width>>
Code
<<a box containing the code - discuss with Femi>>
Code
...