Skip to end of banner
Go to start of banner

Tree Tables

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 23 Next »

Lead:  Liav Nadler  DONE     

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

A tree table is similar to 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

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

<<a box containing the code - discuss with Femi>>

  • No labels