vanillatree No Maintenance Intended npm version
Standalone tree view library
For CJS env run npm install --save vanillatree:
const VanillaTree = require('vanillatree');
// treeElement is selector or HTML node, options is optional const tree = new VanillaTree(treeElement, options);
placeholder(string) -- shows if none of leafs is added (optional)contextmenu(array) -- contextual menu items (optional)
const tree = new VanillaTree('.my-selector', { placeholder: 'No leaf is added yet', contextmenu: [{ label: 'Label 1', action(id) { // someAction } },{ label: 'Label 2', action(id) { // someAction } }] });
add(options)-- Adds a leaf.idoption is optionalmove(id, parentId)-- Moves a leaf to another parentremove(id)-- Removes a leaf with given idopen(id)-- Expands child treeclose(id)-- Closes child treetoggle(id)-- Expands or closes child tree depending on current stateselect(id)-- Selects a leaf with given id
tree.add({ label: 'Label A', id: 'a', opened: true, selected: true }); tree.add({ label: 'Label B', id: 'b', parent: 'a' }); tree.open('a');
VanillaTree uses dispatchEvent for events triggering. Each event is cancelable and bubbles up through the DOM. An id of a target element is placed at evt.detail object.
A list of possible events:
vtree-addvtree-movevtree-removevtree-openvtree-closevtree-select
treeElement.addEventListener('vtree-open', (evt) => { info.innerHTML = evt.detail.id + ' is opened'; }); treeElement.addEventListener('vtree-close', (evt) => { info.innerHTML = evt.detail.id + ' is closed'; }); treeElement.addEventListener('vtree-select', (evt) => { info.innerHTML = evt.detail.id + ' is selected'; });
Image sprite is the part of JSTree project