Apresentação · Árvores

Árvores

Componente Tree para estruturas hierárquicas (NestedSet, materialized path). Modo readOnly e modo edição com DnD, rename inplace e exclusão cascateável. TreePanelLayout para o padrão árvore-à-esquerda + detalhe.

Tree · readOnly + edit

Lado a lado: somente-leitura (seleção, expand/collapse, teclado) e edição (DnD reparent, rename inplace via F2 / duplo-clique, exclusão cascateável via Delete).

Modo somente-leitura

Seleção: mac

Eletrônicos
- Notebooks
  - MacBook Air M3
  - ThinkPad X1 Carbon
- Smartphones
  - Pixel 9 Pro
  - iPhone 17
Casa & Decoração
- Luminárias
- Tapetes

↑/↓ navegam, →/← expandem, Enter seleciona.

Modo edição

DnD · F2 · Delete

Eletrônicos
- Notebooks
  - MacBook Air M3
  - ThinkPad X1 Carbon
- Smartphones
  - Pixel 9 Pro
  - iPhone 17
Casa & Decoração
- Luminárias
- Tapetes

Último evento: (nenhum)

TreePanelLayout

Layout split (react-resizable-panels) para telas com árvore persistente à esquerda e detalhe reagindo à seleção à direita.

Catálogo

Eletrônicos
- Notebooks
  - MacBook Air M3
  - ThinkPad X1 Carbon
- Smartphones
  - Pixel 9 Pro
  - iPhone 17
Casa & Decoração
- Luminárias
- Tapetes

Detalhe

notebooks

Cada nó da árvore alimenta este painel — em uma app real, aqui você renderiza um formulário, uma tabela filtrada, métricas, ou o que fizer sentido para o item selecionado.