Lead:  Liav Nadler  

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

Focus management

<<How will the component work with keyboard only - without a mouse. Can be reference if written above

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 >>

Contrast & size compliance

<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>

Design

Code

...

https://zpl.io/2pEq6rV

Image Added

Code

...