Components/Tree

fd-tree · 6 examples from SAP's documentation · Back to the gallery

About

Tree allows the user to display and work with a hierarchical set of items. Trees are mostly used in the master list for a master-detail scenario using the **Flexible Column Layout** and in **Popovers** or **Dialogs**. In certain use cases, they can also be used in the **Dynamic Page Layout**. Items that contain additional items are called nodes, while items that do not contain any other items are called leaves. If available, a single top-most node is called a root node. Apart from the hierarchical structure of its nodes and leaves, a tree is quite similar to a **List**.

**Use the tree if:** - You need to display the key identifier of hierarchically structured items (for example in the first column of the **Flexible Column Layout**. - Selecting one or more items out of a set of hierarchically structured items is a main use case. - The hierarchy has a restricted number of levels (up to about 12, depending on the content) and items (around 200). - You want to have only one implementation for all devices. **Do not use the tree if:** - The main use case is to select one item from a very small number of non-hierarchical items, without viewing additional details. In this case, a **Select** or **Combobox Input** might be more appropriate. - Items are not structured hierarchically. Use a **List** instead. - The hierarchy turns out to have only two levels. In this case, use a **grouped list**. - The hierarchy turns out to be just a categorization based on several details of the item. In this case, an **an analytical table** provides multi-level grouping. Note that the analytical table is not fully responsive. It is only available for desktops and tablets, so you will need to take an adaptive approach by offering an additional UI for smartphones. **Use the tree if:** - You need to display the key identifier of hierarchically structured items (for example in the first column of the **Flexible Column Layout**. - Selecting one or more items out of a set of hierarchically structured items is a main use case. - The hierarchy has a restricted number of levels (up to about 12, depending on the content) and items (around 200). - You want to have only one implementation for all devices. - The main use case is to select one item from a very small number of non-hierarchical items, without viewing additional details. In this case, a **Select** or **Combobox Input** might be more appropriate. - Items are not structured hierarchically. Use a **List** instead. - The hierarchy turns out to have only two levels. In this case, use a **grouped list**. - The hierarchy turns out to be just a categorization based on several details of the item. In this case, an **an analytical table** provides multi-level grouping. Note that the analytical table is not fully responsive. It is only available for desktops and tablets, so you will need to take an adaptive approach by offering an additional UI for smartphones.

Primary

The primary tree component displays level 1 expanded to show level 2, which is indented by 1.5rem. Only the root tree (ul element) needs to have the \

  • Level 1
    • Level 2
    • Level 2
    • Level 2
  • Level 1
  • Level 1 with very long text that does not wrap ... perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
  • Level 1 with very long text and wrapping behaviour ... perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Borderless

Tree can be displayed without borders. To remove the borders from the first level items, add the \

  • Level 1
    • Level 2
      • Level 3
      • Level 3
    • Level 2
  • Level 1
  • Level 1

Highlight indicators

Tree can display highlight indicators on tree items to indicate a status. In this example, each level indents by 0.5rem more than the previous level. For example, level 2 indents by 0.5, level 3 by 1rem and level 4 by 1.5rem (up to level 6). To display tree items with highlight indicators, add the \

  • Level 1
    • Level 2
      • Level 3
        • Level 4
        • Level 4
      • Level 3
    • Level 2
  • Level 1
  • Level 1

Navigable

Tree can be displayed with navigation links by anchoring the \

Selection

Tree can be displayed with checkboxes, allowing the user to select multiple items. To display selected tree items, add the \

Left multi-selection(Dependent Selections)

  • Level 1
    • Level 2
    • Level 2
    • Level 2
  • Level 1
  • Level 1

Right multi-selection

  • Level 1
    • Level 2
    • Level 2
    • Level 2
  • Level 1
  • Level 1

Left single selection

  • Level 1
    • Level 2
    • Level 2
    • Level 2
  • Level 1
  • Level 1

Tree multi selection(Independent Selections)

  • Level 1
    • Level 2
    • Level 2
    • Level 2
  • Level 1
  • Level 1

No data

If there is no data to display, add the \

  • No data