Tailwind CSS Tree View

Tree View solutions for massive datasets.

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

tailwind

.gitignore

img

scripts

templates

Basic usage

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

                                              <div role="tree" aria-orientation="vertical" data-hs-tree-view>
                          <div class="hs-accordion active" role="treeitem" aria-expanded="true" id="hs-cco-four-heading-one" data-hs-tree-view-item='{
                            "value": "assets",
                            "isDir": true
                          }'>
                            <div class="hs-accordion-heading">
                              <button class="hs-accordion-toggle" aria-expanded="true" aria-controls="hs-cco-four-collapse-one">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path class="hs-accordion-active:hidden block" d="M12 5v14"/></svg>
                              </button>
                              assets
                            </div>
      
                            <div id="hs-cco-four-collapse-one" class="hs-accordion-content overflow-hidden transition-[height] duration-300" role="group" aria-labelledby="hs-cco-four-heading-one">
                              <div role="treeitem" data-hs-tree-view-item='{
                                "value": "image.jpg"
                              }'>image.jpg</div>
                            </div>
                          </div>
                        </div>

JavaScript behavior

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 HSTreeView 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.
`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`

Update element.

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

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

Get selected items.

                      
                        const treeView = HSTreeView.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.

Check out Preline UI Components

Tailwind CSS Tree View

On this page