🎛️ Interactive Property Explorer
Experiment with different property combinations to see their effects
Live Tree Preview
Property Controls
Property Presets
Quick Presets:
🔧 Core Properties
Essential properties that define tree behavior and data structure
Property Details
| Property | Type | Default | Description |
|---|---|---|---|
data* | Array<object> | [] | Array of tree node objects. Each object must have properties specified by idMember, pathMember, and displayValueMember. |
idMember* | string | - | Property name that contains unique identifiers for each node. Must be unique across all nodes. |
pathMember* | string | - | Property name that contains the hierarchical path (e.g., "1", "1.1", "1.1.1") using LTree format. |
displayValueMember* | string | - | Property name that contains the text to display for each node. |
expandLevel | number | 2 | Initial expansion depth. Nodes at this level and above will be expanded by default. |
shouldToggleOnNodeClick | boolean | false | When true, clicking on a node will expand/collapse it instead of just selecting. |
Usage Examples
Implementation Notes
🏗️ Data Structure Requirements
- Unique IDs: Each node must have a unique identifier
- Path Hierarchy: Use dot notation like "1.2.3" for parent-child relationships
- Flat Array: All nodes in a single array, not nested objects
📊 Path Format Examples
"1"- Root level node"1.1"- Child of node "1""1.1.1"- Grandchild of node "1""2.5.3"- Third child of fifth child of second root
⚡ Performance Notes
The component efficiently handles large datasets using the LTree structure for fast hierarchy lookups.
🎨 Styling & Display Properties
Properties that control visual appearance and user interface elements
Styling Properties
| Property | Type | Default | Description |
|---|---|---|---|
shouldUseBootstrapIconClasses | boolean | true | Use Bootstrap's chevron-right/chevron-down for expand/collapse icons |
treeClass | string | "" | CSS class applied to the root tree container |
nodeClass | string | "" | CSS class applied to individual tree nodes |
selectedNodeClass | string | "" | CSS class applied to selected nodes |
expandedNodeClass | string | "" | CSS class applied to expanded parent nodes |
dragHighlightClass | string | "" | CSS class applied during drag operations for visual feedback |
Styling Examples
CSS Integration
🎯 Bootstrap Integration
Works seamlessly with Bootstrap classes out of the box. Set shouldUseBootstrapIconClasses to false for custom icon solutions.
🖌️ Custom Themes
Use the various class properties to implement custom themes, dark modes, or brand-specific styling.
✨ State Classes
Different classes for selected, expanded, and drag states allow for rich visual feedback and smooth animations.
📱 Responsive Design
All styling properties work with responsive design patterns and CSS frameworks.
🔄 Interaction Properties
Properties that control drag & drop, search, and user interactions
Interaction Properties
| Property | Type | Default | Description |
|---|---|---|---|
isDragAndDropEnabled | boolean | false | Enable drag and drop functionality for reordering nodes |
dragValidationCallback | function | null | Function to validate drag operations: (draggedNode, targetNode, position) => boolean |
searchText | string | "" | Search query string that filters and highlights matching nodes |
getSearchValueCallback | function | null | Custom function to extract searchable text from nodes: (node) => string |
sortCallback | function | null | Custom sorting function for tree nodes: (items) => sortedItems |
shouldSelectOnClick | boolean | true | Whether clicking a node should select it |
Advanced Usage
Interaction Guide
🤏 Drag & Drop Validation
Use dragValidationCallback to implement business rules like preventing files from being dropped into other files or checking permissions.
🔍 Flexible Search
The search system uses FlexSearch for performance. Customize what's searchable with getSearchValueCallback.
📊 Dynamic Sorting
Sort callbacks receive tree nodes with access to original data via node.data. Useful for sorting by dates, types, or custom criteria.
⚡ Performance Tips
Validation and search callbacks are called frequently - keep them lightweight and avoid expensive operations.