@paneton/tree
v1.0.0
Published
A modern, powerful hierarchical tree component with virtual rendering for massive datasets
Downloads
30
Maintainers
lewopReadme
@paneton/tree
A modern, powerful, and efficient hierarchical tree component with high-performance virtual rendering engine for massive datasets.
✨ Features
- 🚀 Virtual Rendering - Handle thousands of nodes without performance degradation
- 🎨 Fully Themable - CSS variables for complete customization
- 📦 Zero Dependencies - Self-contained, no external dependencies
- 🔧 Rich API - Programmatic control with intuitive methods
- 🎯 Compact Folders - Smart folder compaction for cleaner hierarchies
- 🔍 Node Search - Built-in findNode() and revealNode() methods
- ⚡ Event Callbacks - onClick, onExpand handlers for all nodes
- 🎮 Custom Actions - Add buttons with custom icons and callbacks
- ♿ Accessible - Keyboard navigation ready
- 📱 Responsive - Works on all screen sizes
📦 Installation
npm install @paneton/treeOr using yarn:
yarn add @paneton/treeOr via CDN:
<script src="https://unpkg.com/@paneton/tree/dist/paneton.tree.min.js"></script>🚀 Quick Start
<!DOCTYPE html>
<html>
<head>
<style>
#tree-container {
height: 400px;
width: 300px;
}
</style>
</head>
<body>
<div id="tree-container"></div>
<script src="node_modules/@paneton/tree/dist/paneton.tree.min.js"></script>
<script>
const tree = new Paneton.Tree('#tree-container', {
data: [
{
name: 'Documents',
icon: '📁',
children: [
{ name: 'Resume.pdf', icon: '📄' },
{ name: 'Cover Letter.docx', icon: '📝' }
]
},
{
name: 'Images',
icon: '📁',
children: [
{ name: 'vacation.jpg', icon: '🖼️' },
{ name: 'screenshot.png', icon: '🖼️' }
]
}
]
});
</script>
</body>
</html>📚 Basic Usage
Creating a Tree
const tree = new Paneton.Tree('#container', {
data: [], // Your hierarchical data
theme: {}, // Theme customization
compactFolders: false, // Enable folder compaction
sortNodes: true, // Auto-sort nodes
autoHideButtons: false, // Auto-hide action buttons
expandOnClick: false, // Expand folders on label click
showSegments: true // Show indent guide lines
});Data Structure
const data = [
{
name: 'Folder Name',
icon: '📁', // Optional icon
expanded: true, // Optional: default expanded state
children: [
{
name: 'File Name',
icon: '📄',
buttons: [ // Optional action buttons
{
icon: '<svg>...</svg>',
tooltip: 'Delete',
onClick: (nodeAPI) => {
console.log('Delete clicked', nodeAPI);
}
}
],
onClick: (nodeAPI) => {
console.log('Node clicked', nodeAPI);
}
}
],
onExpand: (isExpanded, nodeAPI) => {
console.log('Folder expanded:', isExpanded);
}
}
];🎨 Theming
Customize the tree appearance using the theme object:
const tree = new Paneton.Tree('#container', {
data: myData,
theme: {
backgroundColor: '#1e1e1e',
nodeTextColor: '#ffffff',
nodeBackgroundHover: '#2a2a2a',
nodeBackgroundSelected: '#3a3a3a',
fontFamily: 'Arial, sans-serif',
fontSize: '14px'
}
});🔧 API Methods
findNode(path)
Find a node by its full path:
const node = tree.findNode('Documents/Images/photo.jpg');
if (node) {
console.log(node.data);
node.select();
node.expand();
}revealNode(path)
Scroll to and select a node:
tree.revealNode('Documents/Deep/Nested/File.txt').then(element => {
console.log('Node revealed:', element);
});add(nodes, options)
Add nodes dynamically:
tree.add([
{ name: 'New File.txt', icon: '📄' }
], {
parentPath: 'Documents'
});destroy()
Clean up the tree instance:
tree.destroy();🎯 Advanced Features
Compact Folders
Automatically compact single-child folder chains:
const tree = new Paneton.Tree('#container', {
data: myData,
compactFolders: true // src/components/ui → src/components/ui
});Auto-hide Buttons
Hide action buttons until hover:
const tree = new Paneton.Tree('#container', {
data: myData,
autoHideButtons: 'activeNode' // or 'all'
});Custom Buttons
Add custom action buttons to any node:
{
name: 'MyFile.txt',
buttons: [
{
icon: '<svg>...</svg>',
tooltip: 'Download',
onClick: (nodeAPI) => downloadFile(nodeAPI.path)
},
{
icon: '<svg>...</svg>',
tooltip: 'Share',
onClick: (nodeAPI) => shareFile(nodeAPI.path)
}
]
}📖 Full Documentation
For complete API reference and advanced examples, visit:
🤝 Contributing
Contributions are welcome! Please read our contributing guidelines before submitting PRs.
📄 License
MIT © @lewopxd
🔗 Links
Part of the Paneton Framework 🥖