TreeView

The TkTreeview component displays hierarchical data in a tree structure with expandable/collapsible nodes. Uses array-based data structure for better performance and easier data management.

React

import { TkTreeView } from '@takeoff-ui/react'

Vue

import { TkTreeView } from '@takeoff-ui/vue'

Angular

import { TkTreeView } from '@takeoff-ui/angular'

Mode

The mode prop controls the display mode of the tree view. It can be set to basic or stepper.

Basic Mode

Displays tree items in a traditional hierarchical structure with expandable/collapsible nodes.

Stepper Mode

Displays tree items in a step-by-step column layout, ideal for navigation and drill-down interfaces.

View Code

React

Vue

Angular

Selectable

Enable checkbox selection with the selectable prop for multi-selection functionality. Use the value prop to control selected items and listen to tk-change events for selection updates.

Selected items: 0

View Code

React

const [selectedItems, setSelectedItems] = useState([]);

const treeData = [
  {
    key: 'documents',
    label: 'Documents',
    children: [
      {
        key: 'work-files',
        label: 'Work Files',
        children: [
          {
            key: 'reports',
            label: 'Reports',
            children: [
              {
                key: 'q1-report',
                label: 'Q1 Report.pdf'
              },
              {
                key: 'q2-report',
                label: 'Q2 Report.pdf'
              }
            ]
          }
        ]
      },
      {
        key: 'personal',
        label: 'Personal',
        children: [
          {
            key: 'photos',
            label: 'Photos',
            children: [
              {
                key: 'vacation-jpg',
                label: 'Vacation.jpg'
              }
            ]
          },
          {
            key: 'notes-txt',
            label: 'Notes.txt'
          }
        ]
      }
    ]
  }
];

<TkTreeView 
  mode="basic"
  type="light"
  size="base"
  items={treeData}
  selectable={true}
  selectionStrategy={all}
  value={selectedItems}
  branchIcon="folder"
  leafIcon="insert_drive_file"
  onTkChange={(e) => setSelectedItems(e.detail)}
  
/>

<div>
  <p>Selected items: {selectedItems.length}</p>
  {selectedItems.length > 0 && (
    <ul>
      {selectedItems.map((key, index) => (
        <li key={index}>{key}</li>
      ))}
    </ul>
  )}
</div>

Vue

<script setup>
import { ref } from 'vue';

const selectedItems = ref([]);

const treeData = [
  {
    key: 'documents',
    label: 'Documents',
    children: [
      {
        key: 'work-files',
        label: 'Work Files',
        children: [
          {
            key: 'reports',
            label: 'Reports',
            children: [
              {
                key: 'q1-report',
                label: 'Q1 Report.pdf'
              },
              {
                key: 'q2-report',
                label: 'Q2 Report.pdf'
              }
            ]
          }
        ]
      },
      {
        key: 'personal',
        label: 'Personal',
        children: [
          {
            key: 'photos',
            label: 'Photos',
            children: [
              {
                key: 'vacation-jpg',
                label: 'Vacation.jpg'
              }
            ]
          },
          {
            key: 'notes-txt',
            label: 'Notes.txt'
          }
        ]
      }
    ]
  }
];
</script>

<template>
  <TkTreeView 
    mode="basic"
    type="light"
    size="base"
    :items="treeData"
    :selectable="true"
    :selection-strategy="all"
    v-model="selectedItems"
    branch-icon="folder"
    leaf-icon="insert_drive_file"
  />
  
  <div>
    <p>Selected items: {{ selectedItems.length }}</p>
    <ul v-if="selectedItems.length > 0">
      <li v-for="(key, index) in selectedItems" :key="index">{{ key }}</li>
    </ul>
  </div>
</template>

Angular

Type

The type prop controls the style type of the tree view. It can be set to basic, divided, or light.

View Code

React

Vue

Angular

Size

The size prop controls the size of the tree view. It can be set to base, small, or large.

View Code

React

Vue

Angular

Expand All

The expandAll prop controls the initial expansion state of tree nodes.

Basic Mode with expandAll

Expands all directory nodes throughout the tree, showing the complete hierarchical structure.

Stepper Mode with expandAll

Expands the first directory path all the way down to show the deepest level in a column layout.

View Code

React

Vue

Angular

Expanded Keys

The expandedKeys prop to control the expanded items.

Current Expanded Keys: ["third-directory","projects"]

View Code

React

Vue

Angular

TreeView API

Props

Name	Type	Default	Description
	IBadgeOptions	null	Badge customization options for children count display.
	string	''	Icon for branch items (items with children). When empty, no icon is shown.
	boolean	false	If true, disables all interaction with the tree view.
	boolean	false	If true, expands all nodes in basic mode. Note: This prop is ignored when expandedKeys is provided.
	string[]	null	Array of keys that should be expanded. Usage: Provide an array of item keys: ["atakan", "mehmet", "4"] Each key must be unique in the tree structure
	ITreeItem[]	[]	Array of tree items data. This is the primary way to provide data to the tree view.
	string	''	Icon for leaf items (items without children). When empty, no icon is shown.
	"basic", "stepper"	'basic'	Tree view mode: 'basic' or 'stepper'.
	boolean	false	If true, enables checkbox selection for tree items.
	"all", "leaf"	'all'	Selection strategy for checkboxes: all: selecting a node selects the node itself and all descendants leaf: selecting a node selects only leaf descendants (and leaf itself if it is a leaf)
	boolean	true	Show/hide the badge for children count on directories.
	boolean	true	Show/hide the pointer icon for selected items.
	boolean	true	Show/hide badges with zero count. Default is true. When false, badges with 0 count will be hidden (works for both selected count and children count).
	"base", "large", "small"	'base'	Tree view size: 'large', 'base' or 'small'.
	"basic", "divided", "light"	'basic'	Tree view type: 'basic', 'divided', or 'light'.
	string[]	null	The value of the selected tree item.

Events

Name	Description
tk-change	Event emitted when the selected value changes.
tk-expand-change	Event emitted when the expanded paths change in controlled mode. Emits an array of keys (e.g., ["4", "13"]) representing the expanded items. Only the keys of expanded items are emitted, not full paths.
tk-item-click	Event emitted when a tree item is clicked.