Widgets

TreeView

A tree with keyboard navigation, tri-state checkboxes and node dragging.

A tree with keyboard navigation, tri-state checkboxes and draggable nodes. shadcn/ui has no tree at all — and one is needed constantly: files, sections, nested tasks.

Installation

terminal

npx @toimetdev/pathlogs-ui add tree-view

Example

📂src

📄index.ts

📂components

📄Button.tsx

📄Dialog.tsx

📄Menu.tsx

📁hooks

📄README.md

📄package.json

Стрелки — навигация, пробел — галочка, перетаскивание меняет вложенность.

<TreeView
  nodes={tree}
  expanded={expanded}
  onExpandedChange={setExpanded}
  checkable
  checked={checked}
  onCheckedChange={setChecked}
  onMove={(next) => setTree(next)}
  renderLabel={(node) => node.name}
/>

Arrows move focus and expand branches, Space ticks a checkbox, and dragging changes nesting.

Props

Prop	Type	Default	Description
`nodes`*	`N[]`	—	The tree. A node needs id and children.
`renderLabel`*	`(node, meta) => ReactNode`	—	The node's caption.
`renderIcon`	`(node, expanded) => ReactNode`	—	An icon on the left.
`expanded / onExpandedChange`	`Set<string> / (set) => void`	—	The expanded nodes.
`checkable`	`boolean`	`false`	Enable tri-state checkboxes.
`checked / onCheckedChange`	`Set<string> / (set) => void`	—	The ticked nodes.
`onMove`	`(nodes, moved) => void`	—	Dragging a node. Without it the tree is read-only.
`onActivate`	`(node) => void`	—	A click or Enter on a node.

nodes*N[]

The tree. A node needs id and children.

renderLabel*(node, meta) => ReactNode

The node's caption.

renderIcon(node, expanded) => ReactNode

An icon on the left.

expanded / onExpandedChangeSet<string> / (set) => void

The expanded nodes.

checkableboolean

defaults to: false

Enable tri-state checkboxes.

checked / onCheckedChangeSet<string> / (set) => void

The ticked nodes.

onMove(nodes, moved) => void

Dragging a node. Without it the tree is read-only.

onActivate(node) => void

A click or Enter on a node.

Tri-state checkboxes

The model, separately

tsx

import {
  flattenTree,    // tree → a flat list of visible rows (for virtualisation)
  moveNode,       // a move, with the descendant check built in
  checkStates,    // tri-state for the whole tree
  treeKeyAction,  // ARIA keyboard behaviour
  filterTree,     // search that keeps ancestors
} from "@/components/ui/tree-view/treeModel";