VirtualTreeView

A virtualized tree view component that only renders visible items for efficient rendering of large trees. Use this when you have thousands of items and need smooth scrolling performance.

When to Use

• Large datasets: Trees with 1,000+ items
• Performance critical: When smooth scrolling is essential
• Deep hierarchies: Deeply nested structures with many expanded nodes

For smaller trees (< 500 items), the regular TreeView component works well.

Large Dataset Demo (5,000+ items)

This demo shows a tree with over 5,000 items. Despite the large dataset, scrolling remains smooth because only visible items are rendered.

import { VirtualTreeView, useTreeState } from "@vuer-ai/vuer-uikit";

function LargeTreeDemo() {
  const [hoveredId, setHoveredId] = useState(null);

  // Large dataset with 5000+ items
  const { visibleData, expandedItems, toggleItem, hasDescendants } = useTreeState({
    data: largeFileSystemData,
    defaultExpanded: true,
  });

  return (
    <VirtualTreeView
      data={visibleData}
      getIcon={getFileIcon}
      height={400}
      hoveredId={hoveredId}
      onItemHover={setHoveredId}
      expandedItems={expandedItems}
      onToggleItem={toggleItem}
      hasDescendants={hasDescendants}
    />
  );
}

Performance Comparison

Compare the VirtualTreeView (left) with the regular TreeView (right). Try scrolling both - the virtual version maintains consistent performance.