TreeNode

API reference and demos for TreeNode.

Source

Import

import { TreeNode } from "@flanksource/clicky-ui/data";

Demos

Default · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
basePaddingPx	number	8	—
defaultOpen	(…) => boolean	—	—
depth	number	0	—
expandAll	boolean | null	null	—
forcedOpenKeys	Set<string | number> | null	null	—
getAriaLabel	(…) => string	—	—
getChildren*	(…) => T[] | undefined	—	—
getChildrenVersion	(…) => string | number	—	Host-controlled invalidation; open nodes refresh when their version changes.
getExpanded	(…) => boolean	—	Controlled expansion, shared between tree instances. Requires onExpandedChange.
getKey*	(…) => string | number	—	—
hasMoreChildren	(…) => boolean	—	Reports that a node has children that are not yet loaded — it renders an expand chevron even when `getChildren` returns nothing. On the first open the node fetches them via `loadChildren`. Without this (the default), a node is expandable only when `getChildren` already returns children.
indentPx	number	16	—
isSecondary	(…) => boolean	—	Marks a node as a **secondary child** of its parent. Secondary children keep the full tree structure (they render, they can be opened manually) but opt out of the bulk behaviours a caller typically wants when they click the toolbar: - Tree-wide filter: their text is skipped during match detection so typing in the search box never surfaces a row because one of its secondary children happened to match. - Expand all: secondary nodes stay at their default-open state instead of being forced open, preventing 28k field rows from flooding the viewport when an operator hits the button on a schema with hundreds of tables. Default: every node is primary (returns false).
loadChildren	(…) => Promise<T[]>	—	Lazily fetch a node's children the first time it is opened. Resolves to the child nodes (which may themselves be lazy). A rejection is surfaced to `renderRow` via `ctx.error` and is not retried until the node is collapsed and reopened. Required for any node `hasMoreChildren` returns true for.
node*	T	—	—
onExpandedChange	(…) => void	—	Receives user and bulk expansion changes for controlled trees.
onRevealToggle	(…) => void	—	—
onSelect	(…) => void	—	—
reloadOnOpen	boolean	false	Refresh lazy children on each manual reopen, retaining the row and its children while loading.
renderAfterChildren	(…) => ReactNode	—	Render a node's result after its children, including when the children are collapsed.
renderDetail	(…) => ReactNode	—	Render extra content beneath a node's row and above its children (e.g. the decompiled source line a call was made from). Rendered for leaf and parent nodes alike, regardless of open/collapsed state, and left-aligned with the row's content column (after the depth indent and chevron). Returning `null`/`undefined`/`false` renders nothing — no wrapper, no extra spacing. A click or keydown inside it is stopped from propagating, so it can never toggle the row's expand/collapse state.
renderRow*	(…) => ReactNode	—	—
revealOverrides	Map<TreeKey, boolean> | null	null	—
revealPath	Map<TreeKey, TreeKey | null> | null	null	—
rowClass	(…) => string	—	—
selected	T | null	null	—