Tree

Use the KTree component to display hierarchical data in a collapsible tree structure.

Client-side Tree (CTreeClientDataProvider)

Simple collapsible tree with client-side data.

Root Folder

Secondary Root

Tree that fetches children on expand from server.

Tree with selection enabled (checkboxes).

Root Folder

Secondary Root

High-performance DOM recycling for massive hierarchies (5,000 nodes) with zero lag.

Org Unit 1

Department 1.1

Resource 1.1.1

Resource 1.1.2

Resource 1.1.3

Resource 1.1.4

Resource 1.1.5

Resource 1.1.6

Resource 1.1.7

Resource 1.1.8

Resource 1.1.9

Department 1.2

Resource 1.2.1

Resource 1.2.2

Resource 1.2.3

Resource 1.2.4

Resource 1.2.5

Resource 1.2.6

Resource 1.2.7

Resource 1.2.8

Resource 1.2.9

Department 1.3

Resource 1.3.1

Configure the KTree component using these attributes.

Name	Type	Default	Description
dataProvider	ADataProvider	-	Required. The provider that supplies the hierarchical data
labelField	string	'name'	The data object property to display as the node label
iconField	string	'icon'	The data object property to use for displaying icons
disabled	boolean	false	Disables tree interactions
selectable	boolean	false	Enables node selection (checkboxes)
multiSelect	boolean	false	Controls if multiple nodes can be selected
searchtext (v-model:searchtext)	string	''	Text to filter/search nodes with two-way binding
modelValue / selectedNode (v-model / v-model:selectedNode)	any	null	Selected node with two-way binding
expandedNodes (v-model:expandedNodes)	Set<string \| number> \| (string \| number)[]	undefined	Set or array of expanded node IDs with two-way binding
isNodeSelected	(node: any) => boolean	() => false	Custom predicate to determine if a node should appear selected
virtualScroll	boolean	false	Enables virtual scrolling with DOM recycling for massive hierarchies
itemHeight	number	32	Row height in pixels for each tree item in virtual mode
viewportHeight	number	400	Height in pixels of the scrollable virtual container
buffer	number	5	Number of additional buffer rows to render above and below viewport

Customize the content of tree nodes.

Name	Description
node	Primary slot for custom node content (Props: node, data)
item	Custom render slot for nodes (Props: node, data)
default	Fallback slot for node content (Props: node, data)

Listen to node interactions.

Name	Description
@update:modelValue	Emitted when selected node changes (for v-model)
@update:selectedNode	Emitted when selected node changes (for v-model:selectedNode)
@update:expandedNodes	Emitted when node expansion changes (for v-model:expandedNodes)
@update:searchtext	Emitted when search filter text changes (for v-model:searchtext)
@node-click	Emitted when a selectable node is clicked (node: any)
@node-toggle	Emitted when a node is expanded or collapsed (nodeId: string \| number)
@select	Fired when a node or its checkbox is clicked (Payload: row)

Complete keyboard support conforming to the WAI-ARIA Tree View design pattern with roving tabindex.

Key	Action
ArrowRight	When closed, expands node without moving focus. When open, moves focus to the first child. On leaf, does nothing.
ArrowLeft	When open, collapses node without moving focus. When child or closed, moves focus to parent node.
ArrowDown	Moves focus to the next visible node.
ArrowUp	Moves focus to the previous visible node.
Home	Moves focus to the first visible node in the tree.
End	Moves focus to the last visible node in the tree (auto-scrolls virtual viewport).
Enter / Space	Selects or toggles the focused node.