Lead: Liav Nadler
| Status | ||||
|---|---|---|---|---|
|
Related Pages: Data Tables
| Table of Contents |
|---|
...
Zero State
In Zero state the table shows will show one row with blank fields, allowing the user to enter data right away
In this case all icons are 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 row 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
...
Use dynamic tables when the data is user-generated
If the number of columns is greater than 5 consider using a static table instead of In some cases, it is preferable to use a regular data table rather than an inline editing table. In this case, clicking the Add New Row button will open a form or a dialog boxFor more information see the best practices section under Inline Editing Tables
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>>
...