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.

Open

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 checkboxes column, clicking a parent checkbox will check all child checkboxes. For more information see Checkboxes.

• 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

Zeplin link	Screen thumbnail
https://zpl.io/2pEq6rV	Open

Code