Tree

API reference and demos for Tree.

Source

Import

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

Demos

Test Tree · Open in Storybook

Process Tree · Open in Storybook

Grouped Config Tree · 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
actions	ReactNode	—	Extra controls rendered in the toolbar's right-hand group, before Expand all / Collapse all. Providing actions shows the toolbar even when the tree is too small for the filter and `showControls` is off.
ariaLabel	string	—	Accessible name applied to the tree root.
basePaddingPx	number	—	—
className	string	—	Classes applied to the tree root.
defaultOpen	(…) => boolean	—	—
empty	ReactNode	—	Empty-state content when no roots are provided.
expandAll	boolean | null	—	Externally controlled expand-all state. When provided together with `onExpandAllChange`, the tree is controlled; otherwise it manages the toolbar state internally.
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	—	—
getSearchText	(…) => string	—	Override the text the filter matches against for a given node. Defaults to a recursive walk of the node's own fields (excluding its `children` and any secondary children), which works for plain-shape trees but leaks text from nested domain objects — e.g. a SQL Table's Field rows are marked secondary, yet the parent record still carries `record.fields[].field` strings that the default walker would collect. Callers that need precise control over search behaviour should return only the text they want surfaced (the node's own display label / id / type).
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	—	—
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.
onExpandAllChange	(…) => void	—	Called when the toolbar expand-all state changes.
onExpandedChange	(…) => void	—	Receives user and bulk expansion changes for controlled trees.
onSearchQueryChange	(…) => void	—	—
onSelect	(…) => void	—	—
reloadOnOpen	boolean	—	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	—	—
revealSelected	boolean	false	Reveal only the path to `selected` when it changes from outside the tree (initial mount or navigation). Ancestors initially show the next path node; manual expansion and collapse then take precedence until the next external selection. Selecting a row by clicking it never re-reveals. Off by default.
roots*	T[]	—	Root nodes to render.
rowClass	(…) => string	—	—
searchLabel	string	—	Placeholder and accessible name of the search box, e.g. "Filter tests".
searchQuery	string	—	URL or parent-controlled search query.
selected	T | null	—	—
showControls	boolean	true	Render the Expand all / Collapse all toolbar above the tree. Enabled by default. Set to false to suppress when the tree is tiny or the controls are owned externally.
showSearch	boolean	—	Search box visibility. Omitted: shown for trees with more than 20 edges or a `searchQuery`. `true`: always shown. `false`: never shown — a parent that owns the filter input still filters through `searchQuery`.
toolbarClassName	string	—	Classes applied to the search/control toolbar.