Tree

Trees are used to visualize hierarchial information. They are often used to display navigational structures like nested lists of links.

Usage

API

Components

DaffTreeComponent

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

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

@Component()
class DaffTreeComponent implements OnInit, OnChanges {
  @Input() renderMode: DaffTreeRenderMode
  @Input() tree: DaffTreeData<unknown>
}

Inputs

renderMode

DaffTreeRenderMode

Default –

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.

tree

DaffTreeData

Default	–
Description	The tree data you would like to render.

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 {
  @Input() node: DaffTreeFlatNode
  @Input() selected: boolean = false

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

Inputs

node

DaffTreeFlatNode

Default	–
Description	The DaffTreeFlatNode associated with this specific tree item.

selected

boolean

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

() 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>