1. framework components
  2. ›
  3. tree view

Tree View

Used to display hierarchical data.

File System

package.json

Controlled

Reactively set and control the state values.

File System

package.json

Multiple Selection

  • Windows: Hold Ctrl + left click with mouse.
  • MacOS: Hold ⌘ + left click with mouse.

File System

package.json

Provider Pattern

Use the Provider Pattern to gain access to the collapse and expand methods on the TreeView instance.

File System

package.json

Lazy Loading

Utilize promises to asynchronously load large node lists.

File System

package.json

Anatomy

Here’s an overview of how the TreeView component is structured in code:

tsx 
import { TreeView } from '@skeletonlabs/skeleton-react';

export default function Anatomy() {
	return (
		<TreeView>
			<TreeView.Label />
			<TreeView.Tree>
				<TreeView.Branch>
					<TreeView.BranchControl>
						<TreeView.BranchTrigger />
						<TreeView.BranchIndicator />
						<TreeView.BranchText />
					</TreeView.BranchControl>
					<TreeView.BranchContent>
						<TreeView.Item>
							<TreeView.ItemText />
						</TreeView.Item>
					</TreeView.BranchContent>
				</TreeView.Branch>
			</TreeView.Tree>
		</TreeView>
	);
}

API Reference

Root

Prop Default Type
translations — IntlTranslations | undefined

Specifies the localized strings that identifies the accessibility elements and their states
collection — TreeCollection<T> | undefined

The tree collection data
ids — Partial<{ root: string; tree: string; label: string; node: (value: string) => string; }> | undefined

The ids of the tree elements. Useful for composition.
expandedValue — string[] | undefined

The controlled expanded node ids
defaultExpandedValue — string[] | undefined

The initial expanded node ids when rendered. Use when you don't need to control the expanded node value.
selectedValue — string[] | undefined

The controlled selected node value
defaultSelectedValue — string[] | undefined

The initial selected node value when rendered. Use when you don't need to control the selected node value.
defaultCheckedValue — string[] | undefined

The initial checked node value when rendered. Use when you don't need to control the checked node value.
checkedValue — string[] | undefined

The controlled checked node value
defaultFocusedValue — string | null | undefined

The initial focused node value when rendered. Use when you don't need to control the focused node value.
focusedValue — string | null | undefined

The value of the focused node
selectionMode "single" "single" | "multiple" | undefined

Whether the tree supports multiple selection - "single": only one node can be selected - "multiple": multiple nodes can be selected
onExpandedChange — ((details: ExpandedChangeDetails<T>) => void) | undefined

Called when the tree is opened or closed
onSelectionChange — ((details: SelectionChangeDetails<T>) => void) | undefined

Called when the selection changes
onFocusChange — ((details: FocusChangeDetails<T>) => void) | undefined

Called when the focused node changes
onCheckedChange — ((details: CheckedChangeDetails) => void) | undefined

Called when the checked value changes
canRename — ((node: T, indexPath: IndexPath) => boolean) | undefined

Function to determine if a node can be renamed
onRenameStart — ((details: RenameStartDetails<T>) => void) | undefined

Called when a node starts being renamed
onBeforeRename — ((details: RenameCompleteDetails) => boolean) | undefined

Called before a rename is completed. Return false to prevent the rename.
onRenameComplete — ((details: RenameCompleteDetails) => void) | undefined

Called when a node label rename is completed
onLoadChildrenComplete — ((details: LoadChildrenCompleteDetails<T>) => void) | undefined

Called when a node finishes loading children
onLoadChildrenError — ((details: LoadChildrenErrorDetails<T>) => void) | undefined

Called when loading children fails for one or more nodes
expandOnClick true boolean | undefined

Whether clicking on a branch should open it or not
typeahead true boolean | undefined

Whether the tree supports typeahead search
loadChildren — ((details: LoadChildrenDetails<T>) => Promise<T[]>) | undefined

Function to load children for a node asynchronously. When provided, branches will wait for this promise to resolve before expanding.
scrollToIndexFn — ((details: ScrollToIndexDetails<T>) => void) | undefined

Function to scroll to a specific index. Useful for virtualized tree views.
dir "ltr" "ltr" | "rtl" | undefined

The document's text/writing direction.
getRootNode — (() => ShadowRoot | Node | Document) | undefined

A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

Provider

Prop Default Type
value — TreeViewApi<PropTypes, any>

element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

Context

Prop Default Type
children — (treeView: TreeViewApi<PropTypes, any>) => ReactNode

Tree

Prop Default Type
element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

Label

Prop Default Type
level — 1 | 2 | 3 | 4 | 5 | 6 | undefined

The level of the heading.
element — ((attributes: HTMLAttributes<"h3">) => Element) | undefined

Render the element yourself

NodeProvider

Prop Default Type
value — NodeProps

children — ReactNode

NodeContext

Prop Default Type
children — (treeView: NodeProps) => ReactNode

Branch

Prop Default Type
element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

BranchControl

Prop Default Type
element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

BranchText

Prop Default Type
element — ((attributes: HTMLAttributes<"span">) => Element) | undefined

Render the element yourself

BranchIndicator

Prop Default Type
element — ((attributes: HTMLAttributes<"span">) => Element) | undefined

Render the element yourself

BranchContent

Prop Default Type
element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

BranchIndentGuide

Prop Default Type
element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

Item

Prop Default Type
element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself
View page on GitHub