Light weight tree-view component
Check out [Live Demo]
Import script from CDN
https://cdn.jsdelivr.net/gh/SteelDrEgg/TreeView.js@main/dist/treeview.min.js
Import css from CDN
https://cdn.jsdelivr.net/gh/SteelDrEgg/TreeView.js@main/css/TreeView.min.css
Create a div and TreeView.js could attach itself onto it.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/SteelDrEgg/TreeView.js@main/css/TreeView.min.css">
<script src="https://cdn.jsdelivr.net/gh/SteelDrEgg/TreeView.js@main/dist/treeview.min.js"></script>
</head>
<body>
<div id="my-tree"></div>
<script>
const tree = TreeViewJS.createTree('my-tree', 'white');
const folder = tree.createNode('📁 Documents', false, 'images/folder.png');
folder.createChildNode('📄 File 1.txt', false, 'images/file.png');
tree.drawTree();
</script>
</body>
</html>Create a new tree and attach it to a div by calling createTree
const tree = TreeViewJS.createTree(containerId, backgroundColor, contextMenus);Parameters:
containerId(string) - DOM element ID for tree containerbackgroundColor(string, optional) - Background color (default: 'white')contextMenus(object, optional) - Context menu configuration
Create note / child
const node = tree.createNode(text, expanded, icon, parent, tag, contextMenu);
const child = node.createChildNode(text, expanded, icon, tag, contextMenu);Node operations
node.expandNode(); // Expand single node
node.collapseNode(); // Collapse single node
node.toggleNode(); // Toggle expand/collapse
node.expandSubtree(); // Expand node and all children
node.collapseSubtree(); // Collapse node and all children
node.setText(newText); // Update node text
node.removeNode(); // Delete node and children
node.removeChildNodes(); // Delete all childrenTree operations
tree.drawTree(); // Render the tree
tree.expandTree(); // Expand all nodes
tree.collapseTree(); // Collapse all nodes
tree.selectNode(node); // Select specific nodeBefore expanding a node
tree.nodeBeforeOpenEvent = (node) => {
console.log('Before expanding:', node.text);
};After expanding a node
tree.nodeAfterOpenEvent = (node) => {
console.log('After expanding:', node.text);
};Before collapsing a node
tree.nodeBeforeCloseEvent = (node) => {
console.log('Before collapsing:', node.text);
};A right click context menu is defined by an object
export interface ContextMenuItem {
text: string;
icon?: string;
action: (node: TreeNode) => void;
submenu?: ContextMenu;
}
export interface ContextMenu {
elements: ContextMenuItem[];
}
export interface ContextMenus {
[key: string]: ContextMenu;
}Example
const contextMenus = {
'menu1': {
elements: [
{
text: 'Acton 1',
icon: 'icon.png',
action: (node) => {
const newText = prompt('Enter new text:', node.text);
if (newText) node.setText(newText);
}
},
{
text: 'Actions',
icon: 'folder.png',
submenu: {
elements: [
{
text: 'Add Child',
icon: 'add.png',
action: (node) => {
node.createChildNode('New Child', false, 'file.png');
}
},
{
text: 'Delete Node',
icon: 'delete.png',
action: (node) => {
if (confirm(`Delete "${node.text}"?`)) {
node.removeNode();
}
}
}
]
}
}
]
}
};TreeView.js uses ESBuild by default.
npm run buildThe product is located in /dist
dist/
├── treeview.js # Development bundle
├── treeview.js.map # Source map for debugging
├── treeview.min.js # Production bundle
└── treeview.min.js.map # Minified source map
TreeView.js uses sass for css minification.
sass css/TreeView.css css/TreeView.min.css --style compressed