• components
  • Tree View

components

Tailwind CSS Tree View

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

Require FlyonUI JS
Class Name
Type
Description
tree-view-spaceModifierStyle space and border for sub-menu.
tree-view-selected:{tw-utility-class}ModifierA utility that applies specific Tailwind classes when an item is selected.
tree-view-disabled:{tw-utility-class}ModifierA utility that applies specific Tailwind classes when an item has “disabled” class.
accordion-headingComponentContainer class specifically for child elements within accordion-item.
accordion-toggleComponentThis class is responsible for toggling the tree-view between open and closed states.
accordion-contentComponentThis class defines the content within each tree-view section.
accordion-itemComponentThis class represents each individual item within the tree-view structure.
accordion-item-activeComponentThis class applies styling to indicate an active item within the tree-view.

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.

Each item in the Tree View is defined by the data-tree-view-item attribute. Add this attribute to the individual item elements within the Tree View to indicate which parts of the structure are items that can be interacted with.

Utilize the provided example for Tree View. You can change icon, text as per your needs.

Close Active Element

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

Illustrations

Draggable

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

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.

Checkbox

You can select folders and files by marking the checkboxes.

Destroy/Reinitialize

new

The destroy method is provided to facilitate the destruction of a tree-view element.

JavaScript behavior

Options

PARAMETERS
DESCRIPTION
OPTIONS
DEFAULT VALUE
data-tree-viewActivate the Tree View by applying it to the element, and ensure it is added to the wrapper.--
:controlByInforms the plugin of the active mode and handles events based on the selected mode.checkbox / buttonbutton
:autoSelectChildrenThis option is available when the controlBy parameter is set to checkbox and the item is a directory (isDir: true). When the item is selected, all nested items inherit the value of the parent.booleanfalse
:isIndeterminateApplies an indeterminate visual style when the controlBy parameter is set to checkbox.booleantrue
data-tree-view-itemSpecifies the element within the initialized component that represents the item. This should be applied to the item itself.--
:idOptional. Desired identifier.string-
:valueThe value that will be included in the resulting array.string-
:isDirDetermines that the element is a directory and handles it accordingly.booleanfalse

Methods

The HSTreeView object is contained within the global window object.

METHOD
DESCRIPTION
PUBLIC METHODS
update()Update the element, particularly when rearranging the order of items.
getSelectedItems()Returns a list of selected items.
destroy()Destroys the instance, removes generated markup (if any), removes added classes and attributes.
STATIC METHODS
HSTreeView.getInstance(target, isInstance)
Returns the element associated to the target.
  • target should be a Node or string (valid selector).
  • isInstance boolean. Returns the instance instead of Node if true.

Method usage

Below, we demonstrate how to use the update methods. Assign an ID to the data-tree-view as shown.

Update Element

const treeView = HSTreeView.getInstance('#tree-view-method', true);
const updateBtn = document.querySelector('#update-btn');

updateBtn.addEventListener('click', () => {
  treeView.element.update();
});

Get selected items

// This method is used in above example.
const treeView = HSTreeView.getInstance('#tree-view-method', true)
const getItemsBtn = document.querySelector('#get-items-btn')

getItemsBtn.addEventListener('click', () => {
  console.log(treeView.element.getSelectedItems())
})

Destroy instance

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

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

Event usage

Just like in the methods section, assign an ID to the data-tree-view in events. Click on the item, and observe the console output.

When select changes event example.

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

el.element.on('click', data => {
  console.log('data', data)
})