Lead: Liav Nadler
| Status | ||||
|---|---|---|---|---|
|
Related Pages: Data Tables
| Table of Contents |
|---|
Description
A tree table is a type of data table, where each row can be expanded to reveal related child rows
...
Usage & Behaviour
A tree table is similar to a a basic table, with the exceptions described below:
The first column of the table (e.g Name):
Cannot be moved
Contains icons on each row, allowing the user to expand and collapse them
The first row will be expanded by default, unless otherwise specified
Expanding a row will reveal at least one child row
On child rows:
The text of the first column is indented in relation to parent rows
All other cells may be similar to the parent rows or blank (if child row does net share the same values)
If the table has a checkboxes column, clicking a parent checkbox will check all child checkboxes. For more information see Checkboxes
Table rows may be draggable (see example above). For more information see /wiki/spaces/~347593403/pages/918783940
Child rows will have a predefined sort
Sorting any column will sort only the parent rows, keeping child rows intact (including the collapse / expand state)
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>>
...
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 >>
...
<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>
Design
Zeplin link | Screen thumbnail |
|---|---|
<<Short Zeplin link. You | <<Screen with 200 width>> |
Code
<<a box containing the code - discuss with Femi>>