cosmemilton-ui/clientDados & visualizacao

CmTreeView

Use para hierarquias administrativas como menus, categorias, permissoes e organogramas simples.

Import

tsx
import { CmTreeView } from "cosmemilton-ui/client";

Categorias pesquisaveis

Clique em um item para ver o caminho
Modo Solitário
COM
PED
CLI
FIN
NFE
PAG
tsx
import { CmTreeView, type CmTreeNode } from "cosmemilton-ui/client";

const data: CmTreeNode[] = [
  {
    id: "sales",
    name: "Comercial",
    code: "COM",
    children: [
      { id: "orders", name: "Pedidos", code: "PED", permissionId: 101 },
      { id: "clients", name: "Clientes", code: "CLI", permissionId: 102 },
    ],
  },
  {
    id: "finance",
    name: "Financeiro",
    code: "FIN",
    children: [
      { id: "invoices", name: "Notas fiscais", code: "NFE", permissionId: 201 },
      { id: "payments", name: "Pagamentos", code: "PAG", permissionId: 202 },
    ],
  },
];

export default function Example() {
  return (
    <CmTreeView
      data={data}
      searchable
      expandedByDefault
      showBreadcrumb
      showFooter={false}
      headerText={{ search: "Buscar categoria" }}
    />
  );
}

API rapida

CmTreeView

datasearchableexpandedByDefaultshowBreadcrumbselectionModedraggable