@kit-ng-ui/tree

Hierarchical node list with expand / collapse, selection, and cascading checkboxes.

Install

pnpm add @kit-ng-ui/tree

@use '@kit-ng-ui/tree/styles' as tree;

Usage

nodes: KitTreeNode[] = [
  {
    key: 'docs',
    title: 'Documents',
    icon: '📁',
    children: [
      { key: 'spec', title: 'Spec.pdf', icon: '📄' },
      { key: 'plan', title: 'Plan.md', icon: '📄' },
    ],
  },
];

<kit-tree
  [nodes]="nodes"
  [(expandedKeys)]="expanded"
  [(selectedKeys)]="selected"
  [checkable]="true"
  [(checkedKeys)]="checked"
></kit-tree>

API

<kit-tree>

| Input | Type | Default | Description | | ---------------- | --------------------------------- | ----------- | ------------------------------------------ | | nodes | ReadonlyArray<KitTreeNode> | [] | Root node list. | | expandedKeys | ReadonlyArray<string> (two-way) | [] | Currently expanded keys. | | selectedKeys | ReadonlyArray<string> (two-way) | [] | Currently selected keys. | | checkedKeys | ReadonlyArray<string> (two-way) | [] | Currently checked keys (when checkable). | | selectable | boolean | true | Allow click-to-select on titles. | | multiple | boolean | false | Allow multiple selections. | | checkable | boolean | false | Render checkboxes. | | checkStrictly | boolean | false | Disable parent / child cascade. | | blockNode | boolean | false | Stretch the row to the container width. |

| Output | Payload | Description | | ------------ | -------------------- | ------------------------------------------------------------------------------------------ | | nodeSelect | KitTreeSelectEvent | Fires on title click. (Named nodeSelect to avoid clashing with the native DOM select.) | | check | KitTreeCheckEvent | Fires on checkbox change. | | expand | KitTreeExpandEvent | Fires on chevron click. |

v0.1 omits drag-and-drop, virtual scroll, and async-load children. Use isLeaf: true on nodes whose subtrees load lazily to keep the chevron affordance correct.