TreeView

Use the KTreeView component to display hierarchical data in a rich, multi-column grid layout with filtering, sorting, and row/bulk actions.

1. CAPITreeClientDataProvider (Client-side Tree)

Fetches all data from API, builds tree and paginates client-side. Best for small-medium datasets.

	Type	Name	Size	Modified

2. CTreeClientDataProvider (Static Data)

Uses static data passed via setData(). Purely client-side tree processing.

	Type	Name	Size	Modified
	folder	Root Folder	-	2026-01-15
	folder	Another Root	-	2026-01-20

3. CAPITreeServerDataProvider (Server-side Tree)

Server handles tree building, visibility, and pagination. Best for large datasets.

	Type	Name	Size	Modified

4. Massive Hierarchy Virtualization (5,000+ Nodes)

Demonstrates flat-index virtual scrolling with indentation preserved, rendering 5,000+ nodes using only ~20–30 mounted DOM elements, supporting bulk selection.

Hierarchy Item	Type	Size
Department 1	folder	-
Department 2	folder	-
Department 3	folder	-
Department 4	folder	-
Department 5	folder	-
Department 6	folder	-
Department 7	folder	-
Department 8	folder	-
Department 9	folder	-
Department 10	folder	-
Department 11	folder	-
Department 12	folder	-
Department 13	folder	-
Department 14	folder	-
Department 15	folder	-
Department 16	folder	-
Department 17	folder	-
Department 18	folder	-
Department 19	folder	-
Department 20	folder	-

Configure the KTreeView component using these attributes.

Name	Type	Default	Description
dataProvider	ADataProvider	-	Required. Manages nested tree logic and pagination
columns	ITreeViewColumn[]	-	Required. The column definitions for the grid
treeColumnIndex	number	0	Which column should render the arrow expansion icons
idKey	string	'id'	Object property containing the unique row ID
parentKey	string	'parentId'	Object property indicating the parent row ID
rowActions	IKDatatableAction[]	[]	Action buttons aligned at the end of each row
bulkActions	IKDatatableAction[]	[]	Appears when checkboxes select multiple rows
expandedByDefault	boolean	false	Whether nodes start off expanded
expandedNodes (v-model:expandedNodes)	(string \| number)[] \| Set<string \| number>	[]	Array or Set of expanded node IDs with two-way binding
selectedRows	any[]	[]	Currently selected rows (supports v-model:selectedRows)
selectAll	boolean	false	Select-all toggle state (supports v-model:selectAll)
headerSlots	Record<string, any>	null	Manual mapping of header slots (internal/advanced)
cellSlots	Record<string, any>	{}	Manual mapping of cell slots (internal/advanced)
virtualScroll	boolean	false	Enable virtual windowing to project massive hierarchies efficiently
itemHeight	number	40	Row height in pixels for virtual projection calculations
viewportHeight	number	500	Height of the virtual tree scrollable viewport in pixels
buffer	number	5	Extra off-screen tree rows rendered above and below viewport

Listen to component selection and toggle state changes.

Name	Description
@update:selectedRows	Triggered when the selection of tree rows changes (Array<any>)
@update:selectAll	Triggered when the "Select All" toggle state changes (boolean)
@update:expandedNodes	Triggered when node expansion changes (for v-model:expandedNodes)
@node-toggle	Triggered when a node is expanded or collapsed (nodeId: string \| number)

Customize individual columns and headers.

Name	Description
cell-[fieldName]	Custom render slot for a specific column field (Props: row, field, value)
header-[fieldName]	Custom render slot for a specific column header (Props: field)

Property	Type	Description
field	string	The data property to display in this column
header	string	The label shown in the header row
width	string	CSS width for the column (e.g. '100px', '20%')
component	string	Optional Vue component name for custom rendering
componentProps	any	Optional props passed to the custom component