Live Docs

Navigation

Data Display /

stable

Tree View

Pohon hierarki expandable untuk data bertingkat (file tree, kategori, org). Data-driven, dengan selection & kontrol expand opsional.

import { TreeView } from "@naraya/ui";

Examples

Selectable file tree

  • src
    • components
      • Button.tsx
      • Input.tsx
    • index.ts
  • README.md

Selected: input

const [selected, setSelected] = useState("input");

<TreeView
  data={data}
  defaultExpandedIds={["src", "components"]}
  selectable
  selectedId={selected}
  onSelect={setSelected}
/>

Read-only (tanpa selection)

  • src
    • index.ts
  • README.md
<TreeView data={data} defaultExpandedIds={["src"]} />

Props

PropTypeDefaultDescription
data*TreeNode[]—Pohon node: { id, label, icon?, children? }.
defaultExpandedIdsstring[]—Node yang terbuka awal (uncontrolled).
expandedIdsstring[]—Expand terkontrol — pasangkan dengan onExpandedChange.
onExpandedChange(ids: string[]) => void—Callback saat expand berubah.
selectablebooleanfalseAktifkan highlight selection.
selectedIdstring—Id node terpilih (controlled).
onSelect(id: string) => void—Callback saat node dipilih.

Tokens Used

--color-primary

Highlight row terpilih + ikon aktif

--color-secondary

Hover row

--text-main / --text-muted

Label vs ikon/chevron

--ring-focus

Focus ring row

Accessibility

  • Struktur role='tree' / 'group' / 'treeitem' dengan aria-expanded & aria-selected.
  • Keyboard: Enter/Space toggle+select, ArrowRight expand, ArrowLeft collapse.
  • Tiap baris fokusabel (tabIndex=0); gunakan label node yang jelas & unik.