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

expandAll

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

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.
	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-item-click	Event emitted when a tree item is clicked.