🌳 TreeView Component Demo

A customizable tree view with infinite depth and checkboxes

Features

Example 1: File System Tree

A file system-like tree structure with folders and files. Use expand/collapse buttons or double-click folders to toggle. Double-click items to trigger selection event. Use checkboxes to select items.

Selected Items:
No items selected

Example 2: Organization Structure

A company organization chart with departments and teams. Features custom emoji icons and larger text.

Selected Departments/Teams:
No items selected

Example 3: Custom Indentation

Demonstrates custom indentation width for deeper nesting visualization. This tree has 40px indentation instead of the default 20px.

Selection Info:
No items selected

Example 4: Mixed Icons

Shows nodes with different icon configurations: custom icons, standard icons, and no icons.

Events Log:
Interact with the tree to see events...

Example 5: Fixed Height Container with Overflow

This example shows how the TreeView behaves in a fixed-height container with overflow scrolling. The container has a red border and 300px fixed height to demonstrate scrolling behavior.

Selection Info:
No items selected

Usage Example

// Import the TreeView component
import { TreeViewElement, TreeNode } from '@liwe3/webcomponents';

// Get the tree element
const tree = document.querySelector('liwe3-tree-view');

// Define tree data
const data: TreeNode[] = [
  {
    id: '1',
    label: 'Documents',
    icon: '📁',
    children: [
      {
        id: '1-1',
        label: 'Work',
        icon: '📁',
        children: [
          { id: '1-1-1', label: 'Report.pdf', icon: '📄' },
          { id: '1-1-2', label: 'Presentation.pptx', icon: '📊' }
        ]
      },
      {
        id: '1-2',
        label: 'Personal',
        icon: '📁',
        children: [
          { id: '1-2-1', label: 'Resume.docx', icon: '📝' }
        ]
      }
    ]
  },
  {
    id: '2',
    label: 'Pictures',
    icon: '📁',
    children: [
      { id: '2-1', label: 'Vacation.jpg', icon: '🖼️' },
      { id: '2-2', label: 'Family.png', icon: '🖼️' }
    ]
  }
];

// Set the tree data
tree.data = data;

// Listen for selection changes
tree.addEventListener('selectionchange', (e) => {
  console.log('Selected IDs:', e.detail.selectedIds);
});

// Listen for expand/collapse events
tree.addEventListener('toggle', (e) => {
  console.log(`Node ${e.detail.nodeId} ${e.detail.expanded ? 'expanded' : 'collapsed'}`);
});

// Listen for item double-click events
tree.addEventListener('itemselected', (e) => {
  console.log(`Item selected: ${e.detail.node.label}`, e.detail.node);
});

// Programmatically control the tree
tree.expandAll();        // Expand all nodes
tree.collapseAll();      // Collapse all nodes
tree.selectAll();        // Select all nodes
tree.deselectAll();      // Deselect all nodes

TreeNode Type Definition

type TreeNode = {
  id: string;              // Unique identifier for the node
  label: string;           // Display text for the node
  children?: TreeNode[];   // Optional array of child nodes
  icon?: string;          // Optional icon (emoji or text)
  customIcon?: string;     // Optional custom icon (overrides default)
  selected?: boolean;      // Initial selection state
  expanded?: boolean;      // Initial expansion state
};

CSS Customization

/* Available CSS variables for customization */
liwe3-tree-view {
  --tree-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --tree-font-size: 14px;
  --tree-text-color: #333;
  --tree-background: transparent;
  --tree-padding: 8px;

  --tree-node-border-radius: 6px;
  --tree-hover-background: rgba(0, 123, 255, 0.08);

  --tree-expand-hover-background: rgba(0, 0, 0, 0.1);
  --tree-icon-color: #666;
  --tree-focus-color: #007bff;

  --tree-checkbox-border: #ccc;
  --tree-checkbox-border-radius: 4px;
  --tree-checkbox-background: white;
  --tree-checkbox-checked-background: #007bff;
  --tree-checkbox-checked-border: #007bff;
  --tree-checkbox-hover-border: #999;
  --tree-checkbox-hover-shadow: rgba(0, 123, 255, 0.1);

  --tree-custom-icon-size: 20px;
  --tree-label-color: #333;
  --tree-label-font-weight: 400;
  --tree-label-hover-color: #007bff;

  --tree-guide-line-color: rgba(0, 0, 0, 0.1);
  --tree-empty-color: #999;

  --tree-scrollbar-track: #f1f1f1;
  --tree-scrollbar-thumb: #888;
  --tree-scrollbar-thumb-hover: #555;
}

Icon Configuration

// No icon - set icon to empty string
{ id: '1', label: 'No Icon Item', icon: '' }

// Standard icon - uses default folder/file icons
{ id: '2', label: 'Standard Icon', children: [...] }

// Custom icon - provide your own emoji or character
{ id: '3', label: 'Custom Icon', customIcon: '⭐' }

// Icon property - use any emoji
{ id: '4', label: 'With Emoji', icon: '🎨' }

// Default behavior (no icon property) - shows folder/file icon
{ id: '5', label: 'Default Icon', children: [...] }