« E2 - TreeView Demo

Basic TreeView

Simple hierarchical tree with expand/collapse functionality:

Multi-Select TreeView

TreeView with multi-selection enabled (use Ctrl+click):

Dark Theme TreeView

TreeView with explicit dark theme:

Code Examples

<e2-tree-view></e2-tree-view>

<script>
const treeView = document.querySelector('e2-tree-view');
treeView.items = [
  {
    id: 'folder1',
    label: 'Documents',
    icon: '📁',
    children: [
      {
        id: 'file1',
        label: 'report.pdf',
        icon: '📄'
      },
      {
        id: 'subfolder1',
        label: 'Archive',
        icon: '📁',
        children: [
          {
            id: 'file2',
            label: 'old-document.docx',
            icon: '📄'
          }
        ]
      }
    ]
  }
];
</script>

<e2-tree-view multi-select></e2-tree-view>

<script>
const treeView = document.querySelector('e2-tree-view');

// Enable multi-selection programmatically
treeView.multiSelect = true;

// Select multiple items
treeView.selectItem('item1');
treeView.selectItem('item2');

// Get selected items
console.log(treeView.selectedItems);
console.log(treeView.selectedIds);
</script>

// Listen for expansion events
document.addEventListener('tree-expand', event => {
  const { item, itemId } = event.detail;
  console.log(`Expanded: ${item.label}`);
});

// Listen for collapse events
document.addEventListener('tree-collapse', event => {
  const { item, itemId } = event.detail;
  console.log(`Collapsed: ${item.label}`);
});

// Listen for selection changes
document.addEventListener('tree-selection-change', event => {
  const { selectedItems, addedItems, removedItems } = event.detail;
  console.log('Selection changed:', selectedItems);
});

// Listen for item clicks
document.addEventListener('tree-item-click', event => {
  const { item, ctrlKey, shiftKey } = event.detail;
  console.log(`Clicked: ${item.label}`, { ctrlKey, shiftKey });
});

// Listen for double-clicks
document.addEventListener('tree-item-dblclick', event => {
  const { item } = event.detail;
  console.log(`Double-clicked: ${item.label}`);
});

const treeView = document.querySelector('e2-tree-view');

// Expand/collapse operations
treeView.expandAll();
treeView.collapseAll();
treeView.expandItem('folder1');
treeView.collapseItem('folder1');

// Selection operations
treeView.selectItem('item1');
treeView.deselectItem('item1');
treeView.clearSelection();

// Access properties
console.log(treeView.items);
console.log(treeView.selectedItems);
console.log(treeView.selectedIds);
console.log(treeView.multiSelect);