TreeView

A keyboard-navigable tree with expand and select.

Controlled desktop tree with roving keyboard focus and explicit expansion/selection state.

TreeViewProps<T> generic packages/core/src/desktop-controls.ts:60 ↗

Import

import { TreeView } from "@tarve/core";

Usage

TreeView.tsx

import { TreeView } from "@tarve/core";

let expanded = ["src"];
let selected = "app";

<TreeView
  expandedIds={expanded}
  selectedId={selected}
  nodes={[
    {
      id: "src",
      label: "src",
      icon: "folder",
      children: [
        { id: "app", label: "app.tsx" },
        { id: "theme", label: "theme.ts" },
      ],
    },
    { id: "readme", label: "README.md" },
  ]}
  onExpandedChange={(ids) => {
    expanded = ids;
  }}
  onSelectedChange={(id) => {
    selected = id;
  }}
/>

Props

Prop	Type	Default
`nodes` required	`readonly TreeNode<T>[]`	—
`expandedIds`	`readonly string[]`	`[]`
`indent`	`number`	`18`
`onActivate`	`(id: string, node: TreeNode<T>) => void`	—
`onExpandedChange`	`(ids: string[]) => void`	—
`onSelectedChange`	`(id: string, node: TreeNode<T>) => void`	—
`rowHeight`	`number`	`32`
`selectedId`	`string`	—

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle

Types

TreeNode

interface TreeNode<T = unknown> {
  id: string;
  label: string;
  children?: readonly TreeNode<T>[];
  disabled?: boolean;
  icon?: IconName;
  data?: T;
}