- Plugins
- Tree View
Plugins
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
js
scripts
templates
Methods
The HSSelect
object is contained within the global window
object
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
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