Related Pages: Data Tables
Description
A Tree table is a type of Data Table where each row can be expanded to reveal related child rows.
 |
Usage & Behavior
A tree table is similar to a standard Data Table, with these exceptions:
The first column of the table:
cannot be moved.
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 text of the first column will be indented in relation to parent rows.
all other cells may be similar to the parent rows, or may be blank (if the child row does not share the same values).
If the table has a check boxes column, clicking a parent check box will check all child check boxes. For more information see Check Boxes.
Table rows may be draggable. For more information see Drag and Drop.
Child rows will have a predefined order.
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 |
|---|---|
 |
Code
