Basic Configuration

The most basic configuration only requires a nodes dataset and a parent element.

View Code ⟶

Custom Label

The actual clickable and draggable area — the label — is rendered by a fully customizable function that can be passed to the tree constructor.

View Code ⟶

Confirmation Dialog

It is possible to catch the drop event and wait for confirmation before actually moving things around.

View Code ⟶

Handling Change Events

You can define your own drop event handler in tree constructor options.

View Code ⟶

Handling Click Events

Aside from drop events, it is also possible to define a custom handle for click events.

View Code ⟶

Find and Reveal Nodes

You can search for nodes and interact with them. Click here in order to reveal the hidden node with the title "Deep Nested Page".

View Code ⟶

Disable Sorting

In case you just want to create a tree instance in your app that doesn't provide any sorting functionalty, you can easily disbale the drag-and-drop behavior.

View Code ⟶

No Theme

By default, the included styles only cover the most basic functionality such as collapsing and indentation. You can assign your CSS classes to the rendered elements as well as fully customize the render function. Without any theming, the generated tree looks as follows. In addition to that, the basic styles are controlled by custom properties that allow for easy integration into other design systems.

View Code ⟶