PR01 🎛️ Interactive Property Explorer

Experiment with different property combinations to see their effects

Live Tree Preview
Property Controls
Property Presets
Quick Presets:
Select a preset to quickly configure the tree with common property combinations.

PR02 🔧 Core Properties

Essential properties that define tree behavior and data structure

Property Details
PropertyTypeDefaultDescription
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.
expandLevelnumber2Initial expansion depth. Nodes at this level and above will be expanded by default.
shouldToggleOnNodeClickbooleanfalseWhen true, clicking on a node will expand/collapse it instead of just selecting.
* Required properties highlighted in yellow
Usage Examples
Data Structure & Usage 
 
 
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.
 
PR03 🎨 Styling & Display Properties
 
Properties that control visual appearance and user interface elements
 
Styling Properties
 
PropertyTypeDefaultDescription
shouldUseBootstrapIconClassesbooleantrueUse Bootstrap's chevron-right/chevron-down for expand/collapse icons
treeClassstring""CSS class applied to the root tree container
nodeClassstring""CSS class applied to individual tree nodes
selectedNodeClassstring""CSS class applied to selected nodes
expandedNodeClassstring""CSS class applied to expanded parent nodes
dragHighlightClassstring""CSS class applied during drag operations for visual feedback
 
Styling Examples
 
Custom Styling 
 
 
 
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.
 
PR04 🔄 Interaction Properties
 
Properties that control drag & drop, search, and user interactions
 
Interaction Properties
 
PropertyTypeDefaultDescription
isDragAndDropEnabledbooleanfalseEnable drag and drop functionality for reordering nodes
dragValidationCallbackfunctionnullFunction to validate drag operations: (draggedNode, targetNode, position) => boolean
searchTextstring""Search query string that filters and highlights matching nodes
getSearchValueCallbackfunctionnullCustom function to extract searchable text from nodes: (node) => string
sortCallbackfunctionnullCustom sorting function for tree nodes: (items) => sortedItems
shouldSelectOnClickbooleantrueWhether clicking a node should select it
dragDropModestring'both'Controls drag-drop operations: 'none' | 'self' | 'cross' | 'both'. 'self' = same tree only, 'cross' = between trees only
orderMemberstringnullProperty name containing sort order value for sibling ordering (e.g., "sortOrder")
dragOverNodeClassstring""CSS class for drag-over visual feedback. Built-in: 'ltree-dragover-highlight', 'ltree-dragover-glow'
 
Advanced Usage
 
Advanced Interactions 
 
 
 
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.
 
PR05 🎯 Drop Zone Properties (v4.5.0+)
 
Configure visual drop indicators and positioning for drag-drop operations
 
Drop Zone Properties
 
PropertyTypeDefaultDescription
dropZoneLayoutstring'around'Drop zone arrangement: 'around' | 'above' | 'below' | 'wave' | 'wave2'
dropZoneStartnumber | string33Horizontal start position (number = %, string = CSS value like "50px")
dropZoneMaxWidthnumber120Maximum width in pixels for wave layouts
isLoadingbooleanfalseShows a loading overlay on the tree during async operations
 
Drop Zone Layouts
 
  • 'around' - Above zone on top, Below/Child zones on bottom (default)
    •  
  • 'above' - All 3 zones in a horizontal row above the node
    •  
  • 'below' - All 3 zones in a horizontal row below the node
    •  
  • 'wave' - Zones stacked vertically with fixed width
    •  
  • 'wave2' - Diagonal wave pattern with offset
 
Usage Examples
 
Drop Zone Configuration 
 
 
 
Configuration Guide
 
🎯 Drop Positions
 
When dropping a node, the position parameter indicates:
 
  • 'above' - Insert as sibling before target
    •  
  • 'below' - Insert as sibling after target
    •  
  • 'child' - Insert as child of target
 
📱 Touch Support
 
Touch drag-drop is enabled by default:
 
  • Long-press (300ms) initiates drag
    •  
  • Ghost element follows finger
    •  
  • Haptic feedback on drag start
 
⏳ Loading State
 
Use isLoading to show a visual overlay during async operations like database saves.
 
📦 Empty Tree Drops
 
Use the dropPlaceholder snippet to show a drop zone in empty trees.
 
📝 Callback Properties (Svelte 5)
 
Event callbacks using Svelte 5 prop syntax instead of on:event dispatchers
 
Callback Properties
 
PropertySignatureDescription
onNodeClicked(node: LTreeNode) => voidCalled when a node is clicked
onNodeDragStart(node, event) => voidCalled when drag operation begins
onNodeDrop(dropNode, draggedNode, position, event) => voidCalled when node is dropped. position is 'above'|'below'|'child'. dropNode can be null.
contextMenuCallback(node, closeMenu) => ContextMenuItem[]Returns context menu items for a node
 
Note: Svelte 5 uses callback props instead of event dispatchers.
					Use onNodeClicked={handler} not on:nodeClick={handler}.
 
Usage Examples
 
Callback Props (Svelte 5) 
 
 
 
Migration Guide
 
🔄 Svelte 4 → Svelte 5 Migration
 
Svelte 4Svelte 5
on:nodeClickonNodeClicked
on:droponNodeDrop
on:dragStartonNodeDragStart
 
⚠️ Breaking Change: onNodeDrop
 
The drop callback now includes position and operation parameters:
 
  • Before: (dropNode, draggedNode, event)
    •  
  • After: (dropNode, draggedNode, position, event, operation)
 
🎯 Null dropNode
 
dropNode is null when dropping:
 
  • Into an empty tree (via dropPlaceholder)
    •  
  • Into the root drop zone