Nav open / close arrow

Styles

Using this Component

Tree tables are used to display structurally hierarchical lists of object references and metadata


Contents

Tree tables can contain a wide variety of information and interface components, but should be used only when the hierarchical relationships between the rows is important. Like UIPlatformTable, tree tables can have actions & interactive elements within the rows. The table’s actions & columns are determined by Alation.


Structure

Each row of the tree table can be expanded if that row has children present in the table contents. The nesting structure of the rows should reflect the taxonomy of the contents.


Alternatives

To display raw data or query results, use a UIDataTable. To show information that does not have the hierarchical structure use a UIPlatformTable. For more information on when each table type is appropriate, see the Types of Data learn Fabric module.

Structure

Behavior

Tree tables have some number of expandable rows, depending on the contents. They may also  have various other actions both at the table-level, and the row-level, depending on the implementation.


Expanding Rows

When a row is expandable, a clickable disclosure arrow is left-aligned within the row. This action toggles the opening and closing of that row’s children. When a row has no children to display, this arrow is not shown.


Built-in Actions

Actions that control the table view, including filtering & pagination, are build into the tree table.

Related Components

Last Updated

August 6, 2020

Coming soon...

Component code details for this component are not currently available, but we're working on it!

Checkout this UIKit component's code and comments in the codebase for usage examples, props, and more.

Eng Description

Code Path & Props

Up to date props can be found at the codepath above.

Example Code