🔧 Properties
All available properties for the Tree component
Property Reference
| Property | Type | Default | Description |
|---|---|---|---|
data* | Array<object> | [] | Array of tree node objects with hierarchical structure |
idMember* | string | - | Property name for unique node identifiers |
pathMember* | string | - | Property name for hierarchical path structure |
displayValueMember* | string | - | Property name for displayed node text |
expandLevel | number | 2 | Default expansion depth for tree nodes |
shouldToggleOnNodeClick | boolean | false | Enable expand/collapse on node click |
shouldUseBootstrapIconClasses | boolean | true | Use Bootstrap icon classes for expand/collapse |
isDragAndDropEnabled | boolean | false | Enable drag and drop functionality |
sortCallback | function | null | Custom sorting function for tree nodes |
searchText | string | '' | Search query string for filtering nodes |
Usage Examples
Property Details
📋 Required Properties
The four required properties define the data structure:
- data: Array of your tree objects
- idMember: Unique identifier field name
- pathMember: Hierarchical path field name
- displayValueMember: Display text field name
🎯 Path Structure
Uses LTree-inspired paths like "1", "1.1", "1.1.1" for hierarchy.
🔍 Search Integration
Built-in FlexSearch integration with searchText property.
🎭 Template Snippets
Customizable snippet templates for advanced styling
Available Snippets
| Snippet | Purpose | Parameters |
|---|---|---|
nodeContent | Custom node display content | node, level, isExpanded |
expandIcon | Custom expand/collapse icons | isExpanded, hasChildren |
dragHandle | Custom drag handle element | node, isDragging |
loadingContent | Loading state indicator | node |
Snippet Usage
Customization Guide
🎨 Node Content
Override default node rendering with custom HTML, icons, badges, and interactive elements.
🔽 Expand Icons
Customize expand/collapse indicators. Great for custom icon sets or animated transitions.
🤏 Drag Handles
Custom drag handles for better UX when drag & drop is enabled.
⏳ Loading States
Show custom loading indicators for async operations.
🖱️ Context Menu API
Right-click context menus with callback and snippet approaches
Context Menu Properties
| Property | Type | Default | Description |
|---|---|---|---|
contextMenuCallback | (node, closeMenuCallback) => ContextMenuItem[] | null | Function returning ContextMenuItem[] for dynamic menus. 🆕 v4.3.1: Now receives closeMenuCallback parameter |
contextMenuXOffset | number | 8 | Horizontal offset from cursor position (px) |
contextMenuYOffset | number | 0 | Vertical offset from cursor position (px) |
shouldDisplayContextMenuInDebugMode | boolean | false | Show persistent debug context menu at fixed position |
ContextMenuItem Interface
| Property | Type | Required | Description |
|---|---|---|---|
icon | string | Optional | Icon or emoji for menu item |
title | string | Optional | Display text for menu item |
callback | () => void | Promise<void> | Optional | 🆕 v4.3.1: Sync or async function to execute |
isDisabled | boolean | Optional | Disable menu item interaction |
isDivider | boolean | Optional | Render as visual separator line |
className | string | Optional | CSS classes for custom styling |
🆕 New in v4.3.1 (2025-09-25):
- Async Callback Support: Menu callbacks can now return
Promise<void> - Automatic Error Handling: Failed async operations are caught and logged automatically
- Enhanced Menu Control: Callbacks receive
closeMenuCallbackparameter for programmatic control
Context Menu Usage
Context Menu Features
🔄 Two Approaches
- Callback-based: Dynamic, type-safe, recommended for most cases
- Snippet-based: Full control, custom layouts, advanced styling
🆕 Async Callback Features (v4.3.1)
- Promise Support: Return
Promise<void>from callbacks - Error Handling: Automatic try/catch wrapper with console logging
- Menu Control: Optional
closeMenuCallbackparameter - Robustness: Menu stays open on errors for user retry
📍 Position Control
Fine-tune menu positioning with X/Y offset properties for optimal cursor clearance.
🔧 Debug Mode
Use shouldDisplayContextMenuInDebugMode for persistent menu display during development.
🎨 Styling Options
Apply custom CSS classes with className property or use snippet approach for complete control.
🎪 Events
Component events for interaction handling
Available Events
| Event | Trigger | Event Detail |
|---|---|---|
nodeClick | User clicks on a node | { id, data, path } |
nodeExpand | Node expand/collapse state changes | { id, expanded, children } |
nodeSelect | Node selection state changes | { id, selected, data } |
dragStart | Drag operation begins | { draggedNode, originalIndex } |
dragEnd | Drag operation completes | { draggedNode, targetNode, newIndex } |
searchResult | Search completes | { results, query, total } |
Event Handling
Event Details
🖱️ User Interactions
Handle clicks, selections, and expand/collapse actions.
🔄 Drag & Drop
Monitor drag operations with start/end events for data persistence.
🔍 Search Events
React to search results for analytics or custom filtering logic.
💡 Event Details
All events include relevant node data and context information for easy handling.
💡 Usage Examples
Common implementation patterns and use cases
Live Example
Complete Code
Implementation Notes
📁 File System Pattern
Common pattern for displaying folder structures with custom sorting to show folders before files.
🎯 Key Features Used
- Custom sort callback
- Click to expand/collapse
- Multi-level expansion
- Type-based organization
🔧 Customization Tips
Add icons, badges, or context menus using the nodeContent snippet for enhanced UX.
♿ Accessibility
Built-in accessibility features and best practices
Accessibility Features
Arrow keys, Enter, Space for full navigation
Proper tree, treeitem, and group roles
aria-expanded, aria-selected, aria-level
Visible focus indicators and proper tab order
ARIA Implementation
Accessibility Guide
⌨️ Keyboard Shortcuts
- ↑↓ Navigate between nodes
- ←→ Expand/collapse nodes
- Enter Activate/select node
- Space Toggle selection
- Home/End First/last node
🔊 Screen Readers
Announces node names, levels, expansion state, and selection status automatically.
🎨 High Contrast
Focus indicators work with Windows High Contrast mode and respect user preferences.