Tree

Trees display hierarchical information in a nested, expandable format.

Components

DaffTreeComponent

import { DaffTreeComponent } from '@daffodil/design/tree'

The DaffTreeComponent allows you to render tree structures as interactable UI.

@Component()
class DaffTreeComponent {
  readonly _revision: WritableSignal<number> = signal(0)

  readonly renderMode: InputSignal<DaffTreeRenderMode> = input<DaffTreeRenderMode>()
  readonly id: InputSignal<string> = input<string>(`${daffTreeId++}`)
  readonly tree: InputSignal<DaffTreeData<unknown>> = input<DaffTreeData<unknown>>()
}

Inputs

renderMode

InputSignal<DaffTreeRenderMode>

Default input<DaffTreeRenderMode>()

Description

Default	`input<DaffTreeRenderMode>()`
Description	The rendering mode for nodes in the tree. Default value is `in-dom`, which means nodes are present in the DOM. Generally, `not-in-dom` is faster as there are less DOM elements to render, but there may be use-cases (like SEO) where having the tree in the DOM is relevant.

The rendering mode for nodes in the tree.

Default value is in-dom, which means nodes are present in the DOM.

Generally, not-in-dom is faster as there are less DOM elements to render, but there may be use-cases (like SEO) where having the tree in the DOM is relevant.

InputSignal<string>

Default	input<string>(`${daffTreeId++}`)
Description	A unique identifier for the tree instance. Used as a prefix for all node IDs in the tree. If not provided, an auto-incrementing number is used.

tree

InputSignal<DaffTreeData<unknown>>

Default	`input<DaffTreeData<unknown>>()`
Description	The tree data you would like to render.

Properties

_revision

WritableSignal<number>

Default	`signal(0)`
Description	A revision counter incremented by notifications from tree items. Used to trigger re-flattening when tree item state changes.

Directives

DaffTreeItemDirective

import { DaffTreeItemDirective } from '@daffodil/design/tree'

The DaffTreeItemDirective marks elements as tree child nodes that interact with the parent tree structure.

@Directive()
class DaffTreeItemDirective {
  readonly node: InputSignal<DaffTreeFlatNode> = input.required<DaffTreeFlatNode>()
  readonly selected: InputSignal<boolean> = input(false)

  toggleParent(node: DaffTreeFlatNode): void
  toggleTree(node: DaffTreeFlatNode): void
}

Inputs

node

InputSignal<DaffTreeFlatNode>

Default	`input.required<DaffTreeFlatNode>()`
Description	The DaffTreeFlatNode associated with this specific tree item.

selected

InputSignal<boolean>

Default input(false)

Description

Default	`input(false)`
Description	Whether or not the tree item is the currently active item. Note that there is no requirement that there only be one active item at a time. When a tree item becomes selected, all of its ancestor nodes will be automatically opened so that the selected item is visible.

Whether or not the tree item is the currently active item. Note that there is no requirement that there only be one active item at a time.

When a tree item becomes selected, all of its ancestor nodes will be automatically opened so that the selected item is visible.

() Methods

Parameters

Parameter	`node: DaffTreeFlatNode`
Description

Parameters

Parameter	`node: DaffTreeFlatNode`
Description

Modules

DaffTreeModule

Deprecated

import { DaffTreeModule } from '@daffodil/design/tree'

@NgModule()
class DaffTreeModule {}

Types

DaffTreeData

import { DaffTreeData } from '@daffodil/design/tree'

A basic tree type supporting supplemental data on a tree node.

Tree elements are often slightly more than just basic titles and child items. There may be other important data that needs to be available at render time.

interface DaffTreeData<T> {
  title: string
  url: string
  id: string
  items: DaffTreeData<T>[]
  data: T
}

Properties

title `string`
The label displayed for a tree node.

url `string`
A URL associated with a tree node, which can be used for navigation or linking.

id `string`
A unique ID for a tree node.

items `DaffTreeData<T>[]`
An array of child nodes, each of which is also a `DaffTreeData` item.

data `T`
Additional data associated with a tree node.

DaffTreeRenderMode

import { DaffTreeRenderMode } from '@daffodil/design/tree'

Represents the mode of rendering for nodes in a tree UI.

in-dom: Closed nodes are present in the Document Object Model (DOM).
not-in-dom: Closed nodes are not present in the Document Object Model (DOM).

type DaffTreeRenderMode = 'in-dom' | 'not-in-dom'

Constants

daffTransformTree

import { daffTransformTree } from '@daffodil/design/tree'

Transform a tree-like structure into a DaffTreeData.

const daffTransformTree: <T extends Record<any, any>, V>(tree: T, transformFn: (type: T) => DaffTreeData<V>, key: keyof T) => DaffTreeData<V>