1. Plugins
  2. Tree View

Plugins

Tailwind CSS Tree View

Tree View solutions for massive datasets.

Tree View

Installation

To get started, install Advanced Tree View plugin via npm, else you can skip this step if you are already using Preline UI as a package.

                      
                        npm i @preline/tree-view @preline/accordion
                      
                    

Example

Here is a basic example of a Tree View.

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

Basic usage

Prefer to create your own style? Here is a completely unstylized example.

                      

                      
                    

Data Options

Name Description Options Default value
data-hs-tree-view Activate a Tree View by specifying on an element. Should be added to the wrapper.
:controlBy Tells the plugin which mode is active and processes events accordingly for that mode. "checkbox" | "button" button
:autoSelectChildren This option is available if the parameter controlBy is set to checkbox and if the item is a directory (isDir: true). Then if the item is selected, all nested items receive the value of the parent. boolean false
:isIndeterminate Adds indeterminate visual style, if parameter controlBy is set to checkbox. boolean true
data-hs-tree-view-item Determines which element inside the initialized component is the item. Should be added to the item itself.
:id Optional. Desired identifier. string
:value The value that will then be passed to the resulting array. string
:isDir Determines that the element is a directory and processes it accordingly. boolean false

Tailwind Modifiers

Name Description
hs-tree-view-selected:* A modifier that allows you to set Tailwind classes when item has been selected.
hs-tree-view-disabled:* A modifier that allows you to set Tailwind classes when item has "disabled" class.

Methods

The HSSelect object is contained within the global window object

Method Description
Public methods
update() Updates the element. This is suitable, for example, in case of changing the order of elements.
getSelectedItems() Returns a list of selected items.
Static methods
HSSelect.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

Update element.

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

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

Get selected items.

                      
                        const treeView = HTreeView.getInstance('#tree-view', true);
                        const getItemsBtn = document.querySelector('#get-items-btn');

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

Events

Method Description Returning value
on:click Called when any item was selected.
{
  id: string;
  value: string;
  isDir: boolean;
  path: string;
  isSelected: boolean;
}

When select changes event example.

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

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

Demo examples

Looking for prebuilt UI components based on the Tailwind CSS? Preline UI packs hundreds of component examples for all your website needs.

Plugins UI Mockups
Check out Preline UI Components