Virtual Tree Component Demo

This page demonstrates the Virtual Tree component with chunked roots and lazy children: local (in-memory) vs backend (simulated API), and draggable vs read-only.

Intro

Roots load in chunks; children load on expand. Examples below: local (in-memory) vs backend (simulated API); draggable (reorder) vs read-only.

1. Local chunks + local children — draggable

Scale: 2000 root nodes; each can have up to 4 children (loaded on expand). Chunk size: 500.

Use case: In-memory or preloaded data with reorder. No network; good for file trees, categories, or any tree where data is already in the client and users can drag to reorder.

Move log (last 20)

No moves yet. Drag or use Ctrl+↑/↓.

2. Local chunks + local children — read-only

Same data source as above but without reorder. Use when the tree is for navigation or display only.

3. Backend chunks + backend children — draggable

Chunks and children are fetched with simulated API delay (~280ms / ~220ms). Server-backed tree with reorder; persist order via your backend.

4. Backend chunks + backend children — read-only

Server-backed tree for browsing only (no reorder). Use when you need chunked + lazy loading from an API but users should not change the structure.