Tree View

Components > Displaying Data > Tree View

Use this component to...

Display hierarchical data

See this component in action...

Test out this component in a hosted version of the sample app

Overview

Use the tree view pattern to display hierarchical data, where one item is the parent of another item. Each item has 1 parent unless it’s at the root level of the tree. Each data item can have 0 or more child items.

The tree view allows the user to interactively expand and collapse the child items beneath any item. The application can initially display the tree fully expanded, fully collapsed, or with some items expanded and some collapsed, depending on what makes the most sense.

In keyboard environments, each item in the tree view should be capable of accepting keyboard focus.

In some cases a tree view displays a checkbox next to each item, allowing the user to check and uncheck individual nodes.

A tree view can support selected nodes when it is used as a master list.

A set of tree view nodes, shown both without and with checkboxes

A set of tree view nodes, shown normal and with checkboxes

Development

Web component development

Component reference

p-tree

Module: TreeModule - Package: primeng

⚠️ This component requires the use of Angular and will not work in non-Angular applications.

Displays hierarchical data in a tree, showing parent/child relationships

View the p-tree reference doc

If you're adding PrimeNG to your solution for the first time, reference their setup documentation. It's important to note that the inclusion of the nova-light theme css is not necessary to work with Responsive UI. Styling for the PrimeNG components is provided by Responsive UI's theming.

Implementation

Add primeng and primeicons to your package.json file and use npm to install the modules.

Add package dependencies

"primeicons": "x.y.z",
"primeng": "x.y.z",

Import TreeModule from primeng/tree in your app.module.ts.

Import the module

import { TreeModule } from 'primeng/tree';
@NgModule({
    declarations: [...],
    imports: [
        ...
        TreeModule
    ],
    providers: [...],
    bootstrap: [AppComponent]
})
export class AppModule { }

Add a p-tree element to the location in the view where you would like the tree view to display.

Add the tree element

<p-tree [value]="treeData></p-tree>

In the Typescript file, import TreeNode from the PrimeNG/api and build the data tree on ngOnInit.

Build the backing data for the tree

import { TreeNode } from 'primeng/api';

@Component({
    ...
})
export class TreeViewComponent implements OnInit {
    public treeData: TreeNode[] = null;

    ngOnInit(): void {

        // Tree data for PrimeNG Treeview
        this.treeData = [
            {
                'label': 'General',
                'children': [{
                        'label': 'Accessibility'
                    },
                    {
                        'label': 'Restrictions'
                    },
                    {
                        'label': 'Language and Region'
                    }
                ]
            },
            {
                'label': 'Notifications',
                'children': [
                    {'label': 'Internal Notifications'},
                    {'label': 'External Notifications'}
                ]
            },
            {
                'label': 'Control Center'
            },
            {
                'label': 'Privacy'
            }
        ];
    }

}

If your tree view displays checkboxes, add the selectionMode property to the p-tree element with a value of ‘checkbox’. View the PrimeNG Tree documentation on how to capture the selections.

Trees with checkboxes

<p-tree [value]="treeCheckboxes" selectionMode="checkbox" [(selection)]="selectedCheckboxes"></p-tree>

Angular component development

Component reference

p-tree

Module: TreeModule - Package: primeng

Displays hierarchical data in a tree, showing parent/child relationships

View the p-tree reference doc

Implementation

Add primeng and primeicons to your package.json file and use npm to install the modules.

Add package dependencies

"primeicons": "x.y.z",
"primeng": "x.y.z",

Import TreeModule from primeng/tree in your app.module.ts.

Import the module

import { TreeModule } from 'primeng/tree';
@NgModule({
    declarations: [...],
    imports: [
        ...
        TreeModule
    ],
    providers: [...],
    bootstrap: [AppComponent]
})
export class AppModule { }

Add a p-tree element to the location in the view where you would like the tree view to display.

Add the tree element

<p-tree [value]="treeData></p-tree>

In the Typescript file, import TreeNode from the PrimeNG/api and build the data tree on ngOnInit.

Build the backing data for the tree

import { TreeNode } from 'primeng/api';

@Component({
    ...
})
export class TreeViewComponent implements OnInit {
    public treeData: TreeNode[] = null;

    ngOnInit(): void {

        // Tree data for PrimeNG Treeview
        this.treeData = [
            {
                'label': 'General',
                'children': [{
                        'label': 'Accessibility'
                    },
                    {
                        'label': 'Restrictions'
                    },
                    {
                        'label': 'Language and Region'
                    }
                ]
            },
            {
                'label': 'Notifications',
                'children': [
                    {'label': 'Internal Notifications'},
                    {'label': 'External Notifications'}
                ]
            },
            {
                'label': 'Control Center'
            },
            {
                'label': 'Privacy'
            }
        ];
    }

}

If your tree view displays checkboxes, add the selectionMode property to the p-tree element with a value of ‘checkbox’. View the PrimeNG Tree documentation on how to capture the selections.

Trees with checkboxes

<p-tree [value]="treeCheckboxes" selectionMode="checkbox" [(selection)]="selectedCheckboxes"></p-tree>

Design

Figma design

Figma design info

You can find this component in the Sample App - Tree View page in the Figma UI Kit.

Dev Component	Design Component Name
Tree view node text	Add a text element for each cell and apply the “rui-regular” text style and the “rui-pacific/text-regular” color style.
Tree view expand/collapse button	RUI / Tree View / Expand-Collapse Button
Selected node background	RUI / Tree View / Selected Background
Checkbox	RUI / Forms / Checkbox

You’ll need to decide whether the tree view will include checkboxes or not. Only include checkboxes if the user must be able to select nodes in the tree.

If your tree view will support selected nodes, which is the case when using a tree view as a hierarchical master list, add a selected node background behind one of the nodes to indicate that it is selected.

Adobe XD design

Adobe XD design info

You can find this component in these artboards in the Adobe XD design samples:

Sample App - Tree View

Dev Component	Design Component Name
Tree view node text	Add text and apply the “JHA / Text / Regular” character style.
Tree view expand button	JHA / Tree View / Expand Button
Tree view collapse button	JHA / Tree View / Collapse Button
Selected node background	JHA / Tree View / Selected Background
Checkbox – checked	JHA / Forms / Checkbox / Checked
Checkbox - unchecked	JHA / Forms / Checkbox / Unchecked

You’ll need to decide whether the tree view will include checkboxes or not. Only include checkboxes if the user must be able to select nodes in the tree.

Support options

Have questions on this topic?

Join the Responsive UI team in Microsoft Teams to connect with the community.

See something in this page that needs to change?

Send us feedback on this page.

Last updated Fri Jul 28 2023