TreeView Component
Collapsible tree view for hierarchical data with expand/collapse functionality
Basic Usage
Simple Tree
Animals
Dog
Cat
Bird
Fruits
Colors
Click the arrows to expand/collapse nodes. Click labels to select items.
Icon-Only Expand
Animals
Fruits
Colors
Only arrow icons expand/collapse nodes. Clicking labels fires the clicked event.
File System Example
Interactive File Tree with Programmatic Control
All Nodes:
src/:
src/
components/
utils/
index.ts
docs/
README.md
API.md
package.json
tsconfig.json
A realistic file system tree with programmatic controls. Try the "Load Project" buttons to switch between different project structures, or use the other buttons to control expand/collapse behavior.
Event Log
Tree Events
No events yet...
TreeView Features:
- Collapsible Nodes - Click arrows to expand/collapse
- Label Click Expand - Optional expand on label click (default: true)
- Path-based Events - Events include full path to clicked node
- Initial State - Set initially expanded nodes
- Custom Styling - Customize labels, icons, and indentation
- Programmatic Control - expandNode(), collapseNode(), toggleNode()
- Bulk Operations - expandAll(), collapseAll()
- Data Refresh - setData() to load new tree structures
- Rich Data Support - Generic data type for custom metadata
- Event Handling -
on:expanded,on:collapsed,on:clicked