Components

Tree View

Use Tree View to navigate hierarchical data, making it perfect for directories, hierarchies, and more. Effortlessly expand, collapse, and select tree nodes.

Basic example

Default

To initialize the Tree View component, apply the `data-tree-view` attribute to the wrapper element. This attribute activates the Tree View functionality on the specified element.

assets
css
main
main.css
docs.css
README.txt
.gitignore

Close Active Element

This demo demonstrates how to close the currently open element within its group.

assets
css
main
main.css
docs.css
README.txt
.gitignore

Illustrations

Draggable

The example below demonstrates the drag-and-drop functionality for items.

assets
css
main
main.css
docs.css
README.txt
.gitignore

Draggable and close active element

The example below demonstrates drag-and-drop functionality, including the ability to close the currently open element within its group.

assets
css
main
main.css
docs.css
README.txt
.gitignore

Checkbox

You can select folders and files by marking the checkboxes.

Destroy/Reinitialize

The `destroy` <a href="#destroy-method" class="link link-primary">method</a> is provided to facilitate the destruction of a tree-view element.

assets
css
main
main.css
docs.css
README.txt
.gitignore

JavaScript behavior

Methods — Method usage

The `HSTreeView` object is contained within the global `window` object.

assets
image.jpg
JavaScript
const treeView = document.querySelector('#tree-view-to-destroy')
const accordions = document.querySelectorAll('#tree-view-to-destroy .accordion-item')
const destroy = document.querySelector('#destroy-btn')

destroy.addEventListener('click', () => {
  const treeViewInstance = HSTreeView.getInstance(treeView, true)

  treeViewInstance.element.destroy()
  accordions.forEach(el => {
    const accordionInstance = HSAccordion.getInstance(el, true)

    accordionInstance.element.destroy()
  })
})

Events — Event usage

METHOD| DESCRIPTION | RETURNING VALUE `on:click`| Called when any item was selected. | `{ id: string; value: string; isDir: boolean; path: string; isSelected: boolean; }`

assets
image.jpg
JavaScript
const el = HSTreeView.getInstance('#tree-view-event', true)

el.element.on('click', data => {
  console.log('data', data)
})
Class referenceThe component, style, color, state, size and modifier classes available for this component.
ClassTypeDescription
accordion-headingpartContainer class specifically for child elements within `accordion-item`.
accordion-togglepartThis class is responsible for toggling the tree-view between open and closed states.
accordion-contentpartThis class defines the content within each tree-view section.
accordion-itempartThis class represents each individual item within the tree-view structure.
accordion-item-activestateThis class applies styling to indicate an active item within the tree-view.
tree-view-spacemodifierStyle space and border for sub-menu.
tree-view-selected:{tw-utility-class}variantA utility that applies specific Tailwind classes when an item is selected.
tree-view-disabled:{tw-utility-class}variantA utility that applies specific Tailwind classes when an item has "disabled" class.