Svelte Component

Tree Views

Display information in a hierarchical structure using collapsible nodes.

typescript 
import { TreeView, TreeViewItem, RecursiveTreeView, type TreeViewNode } from '@skeletonlabs/skeleton';
Source Page Source WAI-ARIA

Demo

Child of Child 1

Child of Child 2

Child 2

Child

Icons

Folder

File 1

File 2

Disabled State

Books

Clean Code

The Clean Coder

The Art of Unix Programming

Clean Code

The Clean Coder

The Art of Unix Programming

TV

Expand & Collapse

We can bind the tree view and trigger methods for expanding or collapsing all children at once.

Clean Code

The Clean Coder

The Art of Unix Programming

The Flash

Guardians of the Galaxy

Black Panther

The Simpsons

Rick and Morty

Family Guy

Selection

Each tree view provides a number of selection options.

Single

When using single selection, our items are setup and treated as radio inputs.

Clean Code

The Clean Coder

The Art of Unix Programming

Movies

TV
Medium: books Books: Clean Code

Multiple

When using multiple selection, our items are setup and treated as checkbox inputs.

Clean Code

The Clean Coder

The Art of Unix Programming

Movies

TV
Mediums: books,movies Books: Clean Code,The Art of Unix Programming

Relational

Use the children prop to create a relational connection between parent and children.

Books

Clean Code

The Clean Coder

The Art of Unix Programming

Movies

TV

Books

Clean Code

The Clean Coder

The Art of Unix Programming

Movies

TV

Recursive Mode

Tree views can be generated with a recursive data-driven method using the RecursiveTreeView components.

Expanded

To access and modify the expanded nodes use expandedNodes array prop.

Expanded nodes:

Disabled

To access and modify the disabled nodes use disabledNodes array prop.

Disabled nodes: programming

Selection

Just like normal Tree-view, Recursive Tree-view supports selection with both single and multiple modes.

To access and modify the checked nodes use checkedNodes array prop.

checked nodes:

Relational Selection

Just like normal Tree-view, Recursive Tree-view supports relational selection using the prop relational.

To access and modify the checked nodes use checkedNodes array prop.

In multiple relational selection mode, an extra array prop indeterminateNodes is available to indicate indeterminate nodes.

indeterminate nodes: