Uttara

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.