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