For a flat set without nesting take CdsList, for navigation between sections take CdsMenu, and for collapsible sections of content take CdsExpandablePanel.

Anatomy

A tree node is made of the nesting indent, the expand switcher and the content with the title. The checkbox appears with the checkable prop, the node icon with show-icon.

Storybook

Variations

Expanding nodes

The data of the tree is an array of { title, key, children } nodes in the tree-data prop. The expanded state is driven by v-model:expanded-keys; if you do not need to control it, set the initial state through default-expanded-keys or default-expand-all.

Sandbox Storybook

<script setup lang="ts">
import type { NTree } from '@central-design-system/components';
import { CdsTree } from '@central-design-system/components';
import { ref } from 'vue';

const basicTreeData: NTree.IDataNode[] = [
  {
    title: 'Родительский узел 1',
    key: '0-0',
    children: [
      {
        title: 'Родительский узел 1-0',
        key: '0-0-0',
        children: [
          { title: 'Вложенный узел', key: '0-0-0-0' },
          { title: 'Вложенный узел', key: '0-0-0-1' }
        ]
      },
      {
        title: 'Родительский узел 1-1',
        key: '0-0-1',
        children: [{ title: 'Вложенный узел', key: '0-0-1-0' }]
      }
    ]
  }
];

const expandedKeys = ref<string[]>(['0-0-0']);
const treeData = basicTreeData;
</script>

<template>
  <div class="m-auto max-w-[320px]">
    <CdsTree v-model:expanded-keys="expandedKeys" :tree-data="treeData" />
  </div>
</template>

The expand-action prop expands a node by a click on the whole row: click for a single click, dblclick for a double one. Without it a node expands only from the switcher.

Sandbox Storybook

<script setup lang="ts">
import type { NTree } from '@central-design-system/components';
import { CdsTree } from '@central-design-system/components';

const treeData = (action: NTree.TExpandAction): NTree.IDataNode[] => [
  {
    title: action === 'click' ? 'Нажми на меня' : 'Дважды нажми на меня',
    key: '0-0',
    children: [
      {
        title: 'Родительский узел 1-0',
        key: '0-0-0',
        children: [
          { title: 'Вложенный узел', key: '0-0-0-0' },
          { title: 'Вложенный узел', key: '0-0-0-1' }
        ]
      },
      {
        title: 'Родительский узел 1-1',
        key: '0-0-1',
        children: [{ title: 'Вложенный узел', key: '0-0-1-0' }]
      }
    ]
  }
];
</script>

<template>
  <div class="m-auto flex max-w-[320px] flex-col gap-4">
    <CdsTree :tree-data="treeData('click')" expand-action="click" />
    <CdsTree :tree-data="treeData('dblclick')" expand-action="dblclick" />
  </div>
</template>

Selecting nodes and checkboxes

The selectable prop turns on selecting a node by a click (v-model:selected-keys), multiple allows selecting several nodes. The checkable prop adds checkboxes with their own v-model:checked-keys state: checking a parent checks all its descendants, and a partially checked parent goes into the indeterminate state (turned off with the check-strictly prop). Individual nodes are disabled with the disabled and disableCheckbox flags right in the data.

Sandbox Storybook

<script setup lang="ts">
import type { NTree } from '@central-design-system/components';
import { CdsToggle, CdsTree } from '@central-design-system/components';
import { ref } from 'vue';

const treeData: NTree.IDataNode[] = [
  {
    title: 'Родительский узел 1',
    key: '0-0',
    children: [
      {
        title: 'Родительский узел 1-0',
        key: '0-0-0',
        children: [
          { title: 'Заблокированный узел', key: '0-0-0-0', disabled: true },
          { title: 'Заблокированный чекбокс', key: '0-0-0-1', disableCheckbox: true },
          { title: 'Вложенный узел', key: '0-0-0-2' }
        ]
      },
      {
        title: 'Родительский узел 1-1',
        key: '0-0-1',
        children: [
          { title: 'Вложенный узел', key: '0-0-1-0' },
          { title: 'Вложенный узел', key: '0-0-1-1' },
          { title: 'Вложенный узел', key: '0-0-1-2' }
        ]
      }
    ]
  }
];

const expandedKeys = ref<string[]>(['0-0-0']);
const selectedKeys = ref<string[]>(['0-0-0']);
const checkedKeys = ref<string[]>(['0-0-0']);
const isMultiple = ref(false);
</script>

<template>
  <div class="m-auto max-w-[420px]">
    <div class="mb-2">
      <CdsToggle v-model="isMultiple" label="Мультивыбор selectedKeys" hide-messages />
    </div>

    <CdsTree
      v-model:expanded-keys="expandedKeys"
      v-model:selected-keys="selectedKeys"
      v-model:checked-keys="checkedKeys"
      :tree-data="treeData"
      :multiple="isMultiple"
      checkable
      selectable
    />

    <div class="mt-4 flex justify-between gap-2 text-content-secondary">
      <div>
        <span>expandedKeys:</span>
        <pre>{{ expandedKeys }}</pre>
      </div>
      <div>
        <span>selectedKeys:</span>
        <pre>{{ selectedKeys }}</pre>
      </div>
      <div>
        <span>checkedKeys:</span>
        <pre>{{ checkedKeys }}</pre>
      </div>
    </div>
  </div>
</template>

Connecting lines

The show-line prop draws lines between the nodes — in deep trees this makes it easier to follow the levels. The { showLeafIcon } object controls the icon of the leaf nodes.

Sandbox Storybook

<script setup lang="ts">
import type { NTree } from '@central-design-system/components';
import { CdsToggle, CdsTree } from '@central-design-system/components';
import { ref } from 'vue';

const treeData: NTree.IDataNode[] = [
  {
    title: 'Родительский узел 1',
    key: '0-0',
    children: [
      {
        title: 'Родительский узел 1-0',
        key: '0-0-0',
        children: [
          { title: 'Вложенный узел 1', key: '0-0-0-0' },
          { title: 'Многострочный вложенный узел 2', key: '0-0-0-1' },
          { title: 'Вложенный узел 3', key: '0-0-0-2' }
        ]
      },
      {
        title: 'Родительский узел 1-1',
        key: '0-0-1',
        children: [{ title: 'Вложенный узел 1', key: '0-0-1-0' }]
      }
    ]
  },
  {
    title: 'Родительский узел 2',
    key: '0-1',
    children: [
      {
        title: 'Родительский узел 2-0',
        key: '0-1-0',
        children: [
          { title: 'Вложенный узел', key: '0-1-0-0' },
          { title: 'Вложенный узел', key: '0-1-0-1' }
        ]
      }
    ]
  }
];

const showLeafIcon = ref(false);

const onSelect = (selectedKeys: NTree.TKey[], info: unknown) => {
  console.log('selected', selectedKeys, info);
};
</script>

<template>
  <div class="m-auto max-w-[320px]">
    <div class="mb-2">
      <CdsToggle v-model="showLeafIcon" label="Иконка листа" hide-messages />
    </div>
    <CdsTree :tree-data="treeData" :default-expanded-keys="['0-0-0']" :show-line="{ showLeafIcon }" @select="onSelect">
      <template #title="{ title, key }">
        <template v-if="key === '0-0-0-1'">
          <div>{{ title }}</div>
          <div>{{ title }}</div>
        </template>
        <template v-else>{{ title }}</template>
      </template>
    </CdsTree>
  </div>
</template>

Icons and slots

Slots customize every part of a node; they receive the node context — key, title, expanded, selected and other fields.

Slot	Description
default	Declarative description of the nodes in markup instead of tree-data
icon	Icon of the node. Shown with show-icon
switcherIcon	Icon of the expand switcher
title	Content of the node title

Sandbox Storybook

<script setup lang="ts">
import type { NTree } from '@central-design-system/components';
import { CdsIcon, CdsTree } from '@central-design-system/components';

const treeData: NTree.IDataNode[] = [
  {
    title: 'Родительский узел 1',
    key: '0-0',
    children: [
      {
        title: 'Родительский узел 1-0',
        key: '0-0-0',
        disabled: true,
        children: [
          { title: 'Вложенный узел', key: '0-0-0-0' },
          { title: 'Вложенный узел', key: '0-0-0-1' }
        ]
      },
      {
        title: 'Родительский узел 1-1',
        key: '0-0-1',
        children: [
          { title: 'Вложенный узел', key: '0-0-1-0' },
          { title: 'Вложенный узел', key: '0-0-1-1' }
        ]
      }
    ]
  }
];
</script>

<template>
  <div class="m-auto max-w-[320px]">
    <CdsTree :tree-data="treeData" default-expand-all show-icon checkable>
      <template #switcherIcon="{ switcherCls, expanded }">
        <CdsIcon :name="expanded ? 'minus' : 'add'" :class="switcherCls" />
      </template>

      <template #icon="{ key, selected }">
        <CdsIcon v-if="key === '0-0'" name="add" />
        <CdsIcon v-else-if="key === '0-0-0'" name="settings" />
        <CdsIcon v-else-if="selected" name="info-fill" />
        <CdsIcon v-else name="info" />
      </template>

      <template #title="{ title, key }">
        <div v-if="key === '0-0-1-0'" class="flex items-center gap-1">
          <strong>{{ title }}</strong>
          <CdsIcon name="star" />
        </div>
        <template v-else>{{ title }}</template>
      </template>
    </CdsTree>
  </div>
</template>

Asynchronous loading

The load-data prop loads the child nodes on the first expand: the function receives the node, returns a promise and adds children to the data. Until the promise resolves, the node shows a loading indicator.

Sandbox Storybook

<script setup lang="ts">
import type { NTree } from '@central-design-system/components';
import { CdsTree } from '@central-design-system/components';
import { ref, unref } from 'vue';

const treeData = ref<NTree.IDataNode[]>([
  { title: 'Родительский асинхронный узел', key: '0' },
  { title: 'Родительский асинхронный узел', key: '1' },
  { title: 'Родительский узел', key: '2', isLeaf: true }
]);

const expandedKeys = ref<string[]>([]);
const selectedKeys = ref<string[]>([]);

const onLoadData = (treeNode: NTree.IEventDataNode) =>
  new Promise<void>((resolve) => {
    if (treeNode.dataRef && treeNode.dataRef.children) {
      resolve();
      return;
    }

    setTimeout(() => {
      if (!treeNode.dataRef) return;

      treeNode.dataRef.children = [
        { title: 'Вложенный асинхронный узел', key: `${treeNode.eventKey}-0` },
        { title: 'Вложенный асинхронный узел', key: `${treeNode.eventKey}-1` }
      ];

      treeData.value = [...unref(treeData)];

      resolve();
    }, 1000);
  });
</script>

<template>
  <div class="m-auto max-w-[320px]">
    <CdsTree
      v-model:expanded-keys="expandedKeys"
      v-model:selected-keys="selectedKeys"
      :tree-data="treeData"
      :load-data="onLoadData"
    />
  </div>
</template>

Dragging

The draggable prop allows dragging the nodes; the { icon: true } variant shows a drag handle. The tree does not change the data by itself — the @drop handler rebuilds tree-data, and allow-drop limits the valid drop targets.

Sandbox Storybook

<script setup lang="ts">
import type { NTree } from '@central-design-system/components';
import { CdsTree } from '@central-design-system/components';
import { ref, unref } from 'vue';

const generatedData: NTree.IDataNode[] = [];

const x = 5;
const y = 3;
const z = 2;

const generateData = (level: number, preKey = '0', treeNode: NTree.IDataNode[] = generatedData) => {
  const children: string[] = [];
  for (let i = 0; i < x; i++) {
    const key = `${preKey}-${i}`;
    treeNode.push({ title: key, key });
    if (i < y) {
      children.push(key);
    }
  }
  if (level < 0) {
    return treeNode;
  }
  const nextLevel = level - 1;
  children.forEach((key, index) => {
    treeNode[index].children = [];
    generateData(nextLevel, key, treeNode[index].children);
  });
};

generateData(z);

const treeData = ref<NTree.IDataNode[]>(generatedData);

const onDrop = (info: any) => {
  const dropKey = info.node.key;
  const dragKey = info.dragNode!.key;
  const dropPos = info.node.pos!.split('-');
  const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);

  const loop = (data: NTree.IDataNode[] | undefined, key: string | number, callback: any) => {
    if (!data) return;
    data.forEach((item, index) => {
      if (item.key === key) {
        return callback(item, index, data);
      }
      if (item.children) {
        return loop(item.children, key, callback);
      }
    });
  };

  const data = [...unref(treeData)];
  let dragObj: NTree.IDataNode;

  loop(data, dragKey!, (item: NTree.IDataNode, index: number, arr: NTree.IDataNode[]) => {
    arr.splice(index, 1);
    dragObj = item;
  });

  if (!info.dropToGap) {
    loop(data, dropKey!, (item: NTree.IDataNode) => {
      item.children = item.children || [];
      item.children.unshift(dragObj);
    });
  } else if ((info.node.children || []).length > 0 && info.node.expanded && dropPosition === 1) {
    loop(data, dropKey!, (item: NTree.IDataNode) => {
      item.children = item.children || [];
      item.children.unshift(dragObj);
    });
  } else {
    let ar: NTree.IDataNode[] = [];
    let i = 0;
    loop(data, dropKey!, (_item: NTree.IDataNode, index: number, arr: NTree.IDataNode[]) => {
      ar = arr;
      i = index;
    });
    if (dropPosition === -1) {
      ar.splice(i, 0, dragObj!);
    } else {
      ar.splice(i + 1, 0, dragObj!);
    }
  }

  treeData.value = data;
};
</script>

<template>
  <div class="m-auto max-w-[320px]">
    <CdsTree :tree-data="treeData" :draggable="{ icon: true }" block-node @drop="onDrop" />
  </div>
</template>

Virtual scrolling

The virtual list is on by default (the virtual prop). Set height and the tree scrolls inside a fixed height, rendering only the visible nodes: thousands of rows do not slow the page down.

Sandbox Storybook

<script setup lang="ts">
import type { NTree } from '@central-design-system/components';
import { CdsTree } from '@central-design-system/components';
import { ref, unref, watch } from 'vue';

const selectedKeys = ref<string[]>(['0-0-0', '0-0-1']);
const checkedKeys = ref<string[]>(['0-0-0', '0-0-1']);

watch(selectedKeys, () => console.log('selectedKeys', unref(selectedKeys)));
watch(checkedKeys, () => console.log('checkedKeys', unref(checkedKeys)));

const dig = (path = '0', level = 3): NTree.IDataNode[] => {
  const list: NTree.IDataNode[] = [];
  for (let i = 0; i < 10; i += 1) {
    const key = `${path}-${i}`;
    const treeNode: NTree.IDataNode = { title: key, key };
    if (level > 0) {
      treeNode.children = dig(key, level - 1);
    }
    list.push(treeNode);
  }
  return list;
};
const treeData = dig();
</script>

<template>
  <div class="m-auto max-w-[320px]">
    <CdsTree
      v-model:selected-keys="selectedKeys"
      v-model:checked-keys="checkedKeys"
      :tree-data="treeData"
      :height="300"
      default-expand-all
      checkable
    />
  </div>
</template>

Directory mode

CdsTreeDirectory is a tree with presets for files and folders: directory icons, expanding on click and full-width nodes. It accepts the same props as CdsTree.

Sandbox Storybook

<script setup lang="ts">
import type { NTree } from '@central-design-system/components';
import { CdsTreeDirectory } from '@central-design-system/components';
import { ref } from 'vue';

const treeData: NTree.IDataNode[] = [
  {
    title: 'Новая папка',
    key: '0-0',
    children: [
      { title: 'index.ts', key: '0-0-0', isLeaf: true },
      { title: 'index.html', key: '0-0-1', isLeaf: true }
    ]
  },
  {
    title: 'Другая папка',
    key: '0-1',
    children: [
      { title: 'skuff.png', key: '0-1-0', isLeaf: true },
      { title: 'newFile.md', key: '0-1-1', isLeaf: true }
    ]
  }
];

const expandedKeys = ref<string[]>(['0-0']);
const selectedKeys = ref<string[]>([]);
</script>

<template>
  <div class="m-auto max-w-[320px]">
    <CdsTreeDirectory
      v-model:expanded-keys="expandedKeys"
      v-model:selected-keys="selectedKeys"
      :tree-data="treeData"
      multiple
    />
  </div>
</template>

Guidelines

Storybook

Scenarios

Picking sections for an export

Checkboxes collect a set of sections, and the counter in the button hints at the size of the selection. The loading prop of the button shows the export in progress, disabled prevents starting it with an empty selection.

Sandbox Storybook

<script setup lang="ts">
import type { NTree } from '@central-design-system/components';
import { CdsButton, CdsTree } from '@central-design-system/components';
import { computed, ref } from 'vue';

const treeData: NTree.IDataNode[] = [
  {
    title: 'Электроника',
    key: 'electronics',
    children: [
      { title: 'Ноутбуки', key: 'laptops' },
      { title: 'Мониторы', key: 'monitors' }
    ]
  },
  {
    title: 'Мебель',
    key: 'furniture',
    children: [
      { title: 'Столы', key: 'tables' },
      { title: 'Кресла', key: 'chairs' }
    ]
  },
  { title: 'Канцтовары', key: 'stationery' }
];

const checkedKeys = ref<NTree.TKey[]>([]);
const loading = ref(false);
const exportedCount = ref(0);

const count = computed(() => checkedKeys.value.length);

const onExport = () => {
  loading.value = true;
  exportedCount.value = 0;

  setTimeout(() => {
    exportedCount.value = count.value;
    checkedKeys.value = [];
    loading.value = false;
  }, 1500);
};
</script>

<template>
  <div class="m-auto flex w-[280px] flex-col gap-2">
    <CdsTree v-model:checked-keys="checkedKeys" :tree-data="treeData" default-expand-all checkable />

    <CdsButton :text="`Выгрузить разделы (${count})`" :loading="loading" :disabled="!count" @click="onExport" />

    <span v-if="exportedCount" class="text-center text-content-secondary">
      Выгружено разделов: {{ exportedCount }}
    </span>
  </div>
</template>

Search across the tree

An input field filters tree-data on the fly: the matches and their parents stay in the tree, and v-model:expanded-keys expands the branches with the found nodes. When there are no matches, show an empty state instead of the tree.

Sandbox Storybook

<script setup lang="ts">
import type { NTree } from '@central-design-system/components';
import { CdsTextInput, CdsTree } from '@central-design-system/components';
import { computed, ref, watch } from 'vue';

const structure: NTree.IDataNode[] = [
  {
    title: 'Компания',
    key: 'company',
    children: [
      {
        title: 'Коммерческий департамент',
        key: 'commercial',
        children: [
          { title: 'Отдел продаж', key: 'sales' },
          { title: 'Отдел закупок', key: 'purchases' }
        ]
      },
      {
        title: 'ИТ-департамент',
        key: 'it',
        children: [
          { title: 'Разработка', key: 'development' },
          { title: 'Поддержка', key: 'support' }
        ]
      },
      {
        title: 'Финансовый департамент',
        key: 'finance',
        children: [{ title: 'Бухгалтерия', key: 'accounting' }]
      }
    ]
  }
];

const query = ref('');
const expandedKeys = ref<NTree.TKey[]>(['company']);

const filterNodes = (nodes: NTree.IDataNode[], text: string): NTree.IDataNode[] =>
  nodes.flatMap((node) => {
    const children = filterNodes(node.children ?? [], text);
    const matched = String(node.title).toLowerCase().includes(text);

    if (!matched && !children.length) return [];

    return [{ ...node, children: children.length ? children : node.children }];
  });

const treeData = computed(() => {
  const text = query.value.trim().toLowerCase();

  return text ? filterNodes(structure, text) : structure;
});

const collectParentKeys = (nodes: NTree.IDataNode[]): NTree.TKey[] =>
  nodes.flatMap((node) =>
    node.children?.length && node.key != null ? [node.key, ...collectParentKeys(node.children)] : []
  );

watch(treeData, (nodes) => {
  if (query.value.trim()) {
    expandedKeys.value = collectParentKeys(nodes);
  }
});
</script>

<template>
  <div class="m-auto flex w-[320px] flex-col gap-2">
    <CdsTextInput
      v-model="query"
      placeholder="Найти подразделение"
      prepend-inner-icon="search"
      clearable
      hide-messages
    />

    <CdsTree v-if="treeData.length" v-model:expanded-keys="expandedKeys" :tree-data="treeData" />

    <span v-else class="text-center text-content-secondary">Ничего не найдено</span>
  </div>
</template>

Project files

CdsTreeDirectory with v-model:selected-keys works as a file explorer: a click on a folder expands it, a click on a file selects it. The node keys hold the path to the file, so the selected item is ready to be shown or requested right away.

Sandbox Storybook

<script setup lang="ts">
import type { NTree } from '@central-design-system/components';
import { CdsTreeDirectory } from '@central-design-system/components';
import { computed, ref } from 'vue';

const treeData: NTree.IDataNode[] = [
  {
    title: 'src',
    key: 'src',
    children: [
      {
        title: 'components',
        key: 'src/components',
        children: [
          { title: 'AppHeader.vue', key: 'src/components/AppHeader.vue', isLeaf: true },
          { title: 'AppFooter.vue', key: 'src/components/AppFooter.vue', isLeaf: true }
        ]
      },
      { title: 'main.ts', key: 'src/main.ts', isLeaf: true }
    ]
  },
  {
    title: 'public',
    key: 'public',
    children: [{ title: 'favicon.svg', key: 'public/favicon.svg', isLeaf: true }]
  },
  { title: 'package.json', key: 'package.json', isLeaf: true }
];

const expandedKeys = ref<NTree.TKey[]>(['src']);
const selectedKeys = ref<NTree.TKey[]>([]);

const findNode = (nodes: NTree.IDataNode[], key: NTree.TKey): NTree.IDataNode | undefined => {
  for (const node of nodes) {
    if (node.key === key) return node;

    const child = findNode(node.children ?? [], key);
    if (child) return child;
  }

  return undefined;
};

const selectedFile = computed(() => {
  const key = selectedKeys.value[0];
  if (key === undefined) return undefined;

  const node = findNode(treeData, key);

  return node?.isLeaf ? String(key) : undefined;
});
</script>

<template>
  <div class="m-auto flex w-[320px] flex-col gap-2">
    <CdsTreeDirectory v-model:expanded-keys="expandedKeys" v-model:selected-keys="selectedKeys" :tree-data="treeData" />

    <span class="text-center text-content-secondary">
      {{ selectedFile ? `Открыт файл: ${selectedFile}` : 'Выберите файл' }}
    </span>
  </div>
</template>

API

CdsTree

Props

Name	Type	Default	Description
allowDrop	NTree.TAllowDrop<NTree.IDataNode> | undefined	true	Decides whether a node accepts a drop
autoExpandParent	boolean | undefined	false	Expands the parent node automatically
blockNode	boolean | undefined	false	The tree node fills all the remaining horizontal space
checkable	boolean | undefined	false	Adds a checkbox before the tree nodes
checkedKeys	NTree.TKey[] | { checked: NTree.TKey[]; halfChecked: NTree.TKey[]; } | undefined	—	(v-model) Keys of the checked tree nodes. When the key of a parent node is given, all its child nodes become checked; and the other way around, when the key of a child node is given, its parent node becomes checked too. When checkable and checkStrictly are both true, the object has the checked and halfChecked fields, and checking a child or a parent node no longer affects the other.
checkStrictly	boolean | undefined	false	Checks only the node itself, without its parents and children.
defaultExpandAll	boolean | undefined	false	Expands all the nodes by default
defaultExpandedKeys	NTree.TKey[] | undefined	[]	Expands all the nodes by default
defaultExpandParent	boolean | undefined	true	Expands the parent nodes by default
defaultSelectedKeys	NTree.TKey[] | undefined	—	Tree nodes selected by default
disabled	boolean | null | undefined	null	Disabled state
draggable	boolean | NTree.TDraggableConfig | undefined	false	Allows dragging the tree nodes
expandAction	NTree.TExpandAction | undefined	—	Action that expands or collapses the tree nodes
expandedKeys	NTree.TKey[] | undefined	—	(v-model) Keys of the expanded tree nodes.
fieldNames	NTree.IFieldNames | undefined	—	Maps the title, key and children fields of a tree node to the matching fields of treeData
filterTreeNode	((treeNode: NTree.IEventDataNode) => boolean) | undefined	—	Function that filters (highlights) the tree nodes. When it returns true, the node is highlighted.
height	number | undefined	—	Height of the virtual scrolling list
icon	((nodeProps: NTree.ITreeNodeAttribute) => any) | undefined	—	Icon of the tree node (also available through slot#icon)
loadData	((treeNode: NTree.IEventDataNode) => Promise<any>) | undefined	—	Loads the data of a tree node asynchronously
loadedKeys	NTree.TKey[] | undefined	[]	Keys of the already loaded tree nodes. Required to work with loadData
multiple	boolean | undefined	false	Allows selecting several tree nodes
openAnimation	Function | undefined	—	Animation function for expanding and collapsing a tree node
selectable	boolean | undefined	false	Makes the tree nodes selectable
selectedKeys	NTree.TKey[] | undefined	—	(v-model) Keys of the selected tree nodes.
showIcon	boolean | undefined	false	Shows the icon of the tree node
showLine	boolean | { showLeafIcon: string | boolean; } | undefined	—	Shows the lines between the tree nodes
switcherIcon	((nodeProps: SwitcherIconProps) => any) | undefined	—	Icon of the expand/collapse switcher (also available through slot#switcherIcon)
theme	string | undefined	—	Component theme
treeData	NTree.IDataNode[] | undefined	—	Data of the tree
virtual	boolean | undefined	true	Enables virtual scrolling of the list inside the tree; enabled by default

Events

Name	Type	Description
check	[checked: NTree.TKey[] | { checked: NTree.TKey[]; halfChecked: NTree.TKey[]; }, info: NTree.ICheckInfo]	A node was checked with its checkbox.
click	[event: MouseEvent, node: NTree.IEventDataNode]	Click on a node.
dblclick	[event: MouseEvent, node: NTree.IEventDataNode]	Double click on a node.
doubleclick	[event: MouseEvent, node: NTree.IEventDataNode]	Double click on a node (alias).
dragend	[info: NTree.TNodeDragEventParams]	Dragging of a node finished.
dragenter	[info: NTree.TNodeDragEventParams & { expandedKeys: NTree.TKey[]; }]	A dragged node entered the drop area.
dragleave	[info: NTree.TNodeDragEventParams]	A dragged node left the drop area.
dragover	[info: NTree.TNodeDragEventParams]	A dragged node moves inside the drop area.
dragstart	[info: NTree.TNodeDragEventParams]	Dragging of a node started.
drop	[info: NTree.TNodeDragEventParams & { dragNode: NTree.IEventDataNode; dragNodesKeys: NTree.TKey[]; dropPosition: number; dropToGap: boolean; }]	A node was dropped.
expand	[expandedKeys: NTree.TKey[], info: { node: NTree.IEventDataNode; expanded: boolean; nativeEvent: MouseEvent; }]	A node was expanded or collapsed.
load	[loadedKeys: NTree.TKey[], info: { event: "load"; node: NTree.IEventDataNode; }]	Children of a node were loaded (async loadData).
rightClick	[info: { event: MouseEvent; node: NTree.IEventDataNode; }]	Right click on a node.
select	[selectedKeys: NTree.TKey[], info: { event: "select"; selected: boolean; node: NTree.IEventDataNode; selectedNodes: NTree.IDataNode[]; nativeEvent: MouseEvent; }]	A node was selected.
update:checkedKeys	[checkedKeys: NTree.TKey[] | { checked: NTree.TKey[]; halfChecked: NTree.TKey[]; }]	Checking of a node changed (v-model).
update:expandedKeys	[expandedKeys: NTree.TKey[]]	Expansion of a node changed (v-model).
update:selectedKeys	[selectedKeys: NTree.TKey[]]	Selection of a node changed (v-model).

Slots

Name	Type	Description
default	any	Tree nodes by default (when described declaratively in markup).
icon	NTree.ITreeNodeAttribute	Custom icon of the tree node.
switcherIcon	any	Custom icon of the expand/collapse switcher.
title	NTree.IEventDataNode	Custom title of the tree node.

Exposed

Name	Type	Description
halfCheckedKeys	any	Keys of the nodes with partially checked children — the “half checked” state.
loadingKeys	any	Keys of the nodes whose children are being lazily loaded right now.
scrollTo	ScrollTo	Scrolls the tree to a node by its key or to a given position.
treeRef	any	Reference to the internal tree instance.

CdsTreeDirectory

Props

Name	Type	Default	Description
allowDrop	NTree.TAllowDrop<NTree.IDataNode> | undefined	true	Decides whether a node accepts a drop
autoExpandParent	boolean | undefined	false	Expands the parent node automatically
blockNode	boolean | undefined	false	The tree node fills all the remaining horizontal space
checkable	boolean | undefined	false	Adds a checkbox before the tree nodes
checkedKeys	NTree.TKey[] | { checked: NTree.TKey[]; halfChecked: NTree.TKey[]; } | undefined	—	(v-model) Keys of the checked tree nodes. When the key of a parent node is given, all its child nodes become checked; and the other way around, when the key of a child node is given, its parent node becomes checked too. When checkable and checkStrictly are both true, the object has the checked and halfChecked fields, and checking a child or a parent node no longer affects the other.
checkStrictly	boolean | undefined	false	Checks only the node itself, without its parents and children.
defaultExpandAll	boolean | undefined	false	Expands all the nodes by default
defaultExpandedKeys	NTree.TKey[] | undefined	[]	Expands all the nodes by default
defaultExpandParent	boolean | undefined	true	Expands the parent nodes by default
defaultSelectedKeys	NTree.TKey[] | undefined	—	Tree nodes selected by default
draggable	boolean | NTree.TDraggableConfig | undefined	false	Allows dragging the tree nodes
expandAction	string | false | undefined	—	Action that expands or collapses the tree nodes
expandedKeys	NTree.TKey[] | undefined	—	(v-model) Keys of the expanded tree nodes.
fieldNames	NTree.IFieldNames | undefined	—	Maps the title, key and children fields of a tree node to the matching fields of treeData
filterTreeNode	((treeNode: NTree.IEventDataNode) => boolean) | undefined	—	Function that filters (highlights) the tree nodes. When it returns true, the node is highlighted.
height	number | undefined	—	Height of the virtual scrolling list
icon	((nodeProps: NTree.ITreeNodeAttribute) => any) | undefined	—	Icon of the tree node (also available through slot#icon)
loadData	((treeNode: NTree.IEventDataNode) => Promise<any>) | undefined	—	Loads the data of a tree node asynchronously
loadedKeys	NTree.TKey[] | undefined	[]	Keys of the already loaded tree nodes. Required to work with loadData
multiple	boolean | undefined	false	Allows selecting several tree nodes
openAnimation	Function | undefined	—	Animation function for expanding and collapsing a tree node
selectable	boolean | undefined	false	Makes the tree nodes selectable
selectedKeys	NTree.TKey[] | undefined	—	(v-model) Keys of the selected tree nodes.
showIcon	boolean | undefined	false	Shows the icon of the tree node
showLine	boolean | { showLeafIcon: string | boolean; } | undefined	—	Shows the lines between the tree nodes
switcherIcon	((nodeProps: SwitcherIconProps) => any) | undefined	—	Icon of the expand/collapse switcher (also available through slot#switcherIcon)
treeData	NTree.IDataNode[] | undefined	—	Data of the tree
virtual	boolean | undefined	true	Enables virtual scrolling of the list inside the tree; enabled by default

Events

Name	Type	Description
check	[checked: NTree.TKey[] | { checked: NTree.TKey[]; halfChecked: NTree.TKey[]; }, info: NTree.ICheckInfo]	A node was checked with its checkbox.
click	[event: MouseEvent, node: NTree.IEventDataNode]	Click on a node.
dblclick	[event: MouseEvent, node: NTree.IEventDataNode]	Double click on a node.
doubleclick	[event: MouseEvent, node: NTree.IEventDataNode]	Double click on a node (alias).
dragend	[info: NTree.TNodeDragEventParams]	Dragging of a node finished.
dragenter	[info: NTree.TNodeDragEventParams & { expandedKeys: NTree.TKey[]; }]	A dragged node entered the drop area.
dragleave	[info: NTree.TNodeDragEventParams]	A dragged node left the drop area.
dragover	[info: NTree.TNodeDragEventParams]	A dragged node moves inside the drop area.
dragstart	[info: NTree.TNodeDragEventParams]	Dragging of a node started.
drop	[info: NTree.TNodeDragEventParams & { dragNode: NTree.IEventDataNode; dragNodesKeys: NTree.TKey[]; dragPosition: number; dropToGap: boolean; }]	A node was dropped.
expand	[expandedKeys: NTree.TKey[], info: { node: NTree.IEventDataNode; expanded: boolean; nativeEvent: MouseEvent; }]	A node was expanded or collapsed.
load	[treeNode: NTree.IEventDataNode]	Children of a node were loaded (async loadData).
rightClick	[info: { event: MouseEvent; node: NTree.IEventDataNode; }]	Right click on a node.
select	[selectedKeys: NTree.TKey[], info: { event: "select"; selected: boolean; node: NTree.IEventDataNode; selectedNodes: NTree.IDataNode[]; nativeEvent: MouseEvent; }]	A node was selected.
update:checkedKeys	[checkedKeys: NTree.TKey[] | { checked: NTree.TKey[]; halfChecked: NTree.TKey[]; }]	Checking of a node changed (v-model).
update:expandedKeys	[expandedKeys: NTree.TKey[]]	Expansion of a node changed (v-model).
update:selectedKeys	[selectedKeys: NTree.TKey[]]	Selection of a node changed (v-model).

CdsTreeNode

Props

Name	Type	Default	Description
active	boolean | undefined	—	Highlights the node as active
checkable	boolean | undefined	—	Shows a checkbox next to the node
data	NTree.IDataNode | undefined	undefined as unknown as NTree.IDataNode	Data of the node — the original list item the node is built from
disableCheckbox	boolean | undefined	—	Disables only the checkbox of the node, leaving the node itself available
disabled	boolean | undefined	—	Disables the node: it cannot be selected, checked or expanded
domRef	((arg: any) => void) | undefined	—	Callback that receives the DOM element of the node after mounting
eventKey	NTree.TKey | undefined	''	Unique key of the node — the tree uses it to track selection, expansion and checking
icon	Function | undefined	—	Function that returns the icon of the node
isEnd	boolean[] | undefined	—	“Last on its level” flags for every nesting level — the connecting lines are drawn from them
isLeaf	boolean | undefined	—	The node is a leaf: it has no children and shows no expand switcher
isStart	boolean[] | undefined	—	“First on its level” flags for every nesting level — the connecting lines are drawn from them
parent	NTree.IDataNode | undefined	undefined as unknown as NTree.IDataNode	Data of the parent node. Not set for the top-level nodes
prefixCls	string | undefined	—	Prefix of the CSS classes of the node
selectable	boolean | undefined	—	Allows selecting the node
switcherIcon	Function | undefined	—	Function that returns the icon of the expand switcher
title	string | (Function & string) | undefined	—	Tree node title: a string or a render function