Related Pages: Data Tables
Table of Contents |
---|
Description
A tree Tree table is a type of data table, Data Table where each row can be expanded to reveal related child rows.
...
Usage &
...
Behavior
A tree table is similar to a basic tablea standard Data Table, with the these exceptions described below:
The first column of the table (e.g Name):
Cannot cannot be moved.
Contains contains triangle 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 the text of the first column is will be indented in relation to parent rows.
All all other cells may be similar to the parent rows, or may be blank (if the child row does net not 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 sortorder.
Sorting any column will sort only the parent rows, keeping child rows intact (including the collapse / expand state).
Best Practices
Use for presenting hierarchical data.
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
...
Code
...