Virtual Tree Component

A virtualized tree component that loads root nodes in chunks and children on expand, with optional drag-and-drop reordering.

Overview

The Virtual Tree component provides:

Chunked root loading: Roots are loaded in configurable chunks (e.g. 500 at a time) as you scroll, keeping memory and DOM small.
Lazy children: Children of a node are loaded only when the node is expanded, via a loadChildren callback.
Virtual scrolling: Only visible rows are rendered; spacers maintain scroll height for smooth scrolling over large lists.
Optional draggable mode: Reorder nodes by drag-and-drop or Ctrl+↑ / Ctrl+↓ when draggable is true.

Use the Virtual Tree when you need to:

Display very large trees (e.g. 10k–1M+ root nodes) without loading everything at once.
Load tree data from an API in chunks and load children on demand.
Show a file tree, category hierarchy, or org chart with lazy expansion.
Allow users to reorder nodes (with draggable) and persist order via your backend.

Chunk + lazy: Roots via loadNodeChunk(startIndex, endIndex); children via loadChildren(node) on expand.
Local or backend: Use in-memory functions for local data, or async functions that call your API.
Draggable: Optional drag-and-drop and keyboard (Ctrl+↑/↓) reordering with node-move event.
Capacity: With chunking, total roots can be 100k–1M+; only viewport chunks stay in memory; DOM stays viewport-sized.