Svelte Treeview Showcase

TR01 🔧 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

* Required properties

Usage Examples

Property Usage

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.

TR02 🎭 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

Custom Snippets

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.

TR03 🖱️ 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 closeMenuCallback parameter for programmatic control

Context Menu Usage

Context Menu Implementation

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 closeMenuCallback parameter
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.

TR04 🎪 Callback Props

Svelte 5 callback props for interaction handling

Available Callbacks

Callback	Trigger	Signature
`onNodeClicked`	User clicks on a node	`(node: LTreeNode<T>) => void`
`onNodeDragStart`	Drag operation begins	`(node, event: DragEvent) => void`
`onNodeDragOver`	Dragging over a node	`(node, event: DragEvent) => void`
`onNodeDrop`	Drop operation completes	`(dropNode, draggedNode, position, event, operation)`

Note: Svelte 5 uses callback props, not event dispatchers. Pass functions directly: onNodeClicked={handler}

Callback Usage

Callback Props (Svelte 5)

Callback Details

🖱️ User Interactions

Use onNodeClicked to handle clicks on tree nodes.

🔄 Drag & Drop

Use onNodeDrop with position and operation parameters for full control.

🎯 onNodeDrop Params

position: 'above' | 'below' | 'child'
operation: 'move' | 'copy'
dropNode: null for root drops

💡 Svelte 5 Pattern

Callbacks receive node directly, not CustomEvent objects.

TR05 🔧 Public Methods (v4.5.0+)

Tree manipulation methods for programmatic control

Method Reference

Method	Returns	Description
`addNode(parentPath, data, pathSegment?)`	`AddNodeResult`	Add a new node under the specified parent
`moveNode(sourcePath, targetPath, position)`	`MoveNodeResult`	Move a node to a new location
`removeNode(path)`	`RemoveNodeResult`	Remove a node and its descendants
`updateNode(path, changes)`	`UpdateNodeResult`	Update node data properties
`copyNodeWithDescendants(node, parentPath, transformer)`	`CopyResult`	Deep copy a node subtree with data transformation
`getNodeByPath(path)`	`LTreeNode \| null`	Get a node by its path
`getChildren(parentPath)`	`LTreeNode[]`	Get direct children of a node
`getSiblings(path)`	`LTreeNode[]`	Get siblings of a node
`getAllData()`	`T[]`	Extract all node data for persistence
`getExpandedPaths()`	`string[]`	Get currently expanded node paths
`setExpandedPaths(paths)`	`void`	Restore expanded state after data reload
`expandNodes(path)` / `collapseNodes(path)`	`void`	Expand/collapse a specific node
`expandAll()` / `collapseAll()`	`void`	Expand/collapse all nodes
`scrollToPath(path, options?)`	`void`	Scroll to and highlight a node

🆕 v4.5.0: Methods highlighted in blue are new tree editor methods for CRUD operations.

Usage Examples

Tree Editor Methods

Implementation Guide

📝 CRUD Operations

Use addNode, updateNode, removeNode for direct tree manipulation without full data reload.

🔄 Move Operations

moveNode accepts position: 'above' | 'below' | 'child' to control placement.

💾 State Preservation

Use getExpandedPaths / setExpandedPaths to preserve UI state across data reloads.

📦 Batch Operations

getAllData() extracts all node data for batch database saves.

🎯 Result Objects

All CRUD methods return result objects with:

success: boolean
node?: LTreeNode (the affected node)
error?: string (if failed)

TR06 💡 Usage Examples

Common implementation patterns and use cases

Live Example

Complete Code

File System Tree

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.

TR07 ♿ Accessibility

Built-in accessibility features and best practices

Accessibility Features

Keyboard Navigation
Arrow keys, Enter, Space for full navigation

ARIA Tree Pattern
Proper tree, treeitem, and group roles

Screen Reader Support
aria-expanded, aria-selected, aria-level

Focus Management
Visible focus indicators and proper tab order

ARIA Implementation

ARIA Structure

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.