`<dj-tree>`

A hierarchical tree built from nodes.

The tree knows nothing about what it shows: a file tree, a mail folder list, and a MIME structure are all just nodes. Each node can carry an icon (a name registered with registerIcon or registerIcons from @dojo-ng/icon) and a count, shown as a trailing badge such as an unread count.

Try it in the playground

@dojo-ng/tree · v0.1.1

npm install @dojo-ng/tree

import "@dojo-ng/tree";

Selection and expansion

Both are controlled. value is the selected node id, and the tree emits dj-select.
expanded is the array of open node ids, and the tree emits dj-expand-change.
Clicking a row selects it; clicking the chevron expands or collapses it.
Set expand-on-row-click to make a click on a parent row also expand or collapse it. Use it when some rows exist only to hold others, so a click on them does something visible.

Keyboard

The tree follows the APG tree pattern. Only one row is a tab stop: the selected row if it is visible, otherwise the first visible row. The arrow keys move focus without selecting.

Down and Up move through the visible rows.
Right expands a closed parent, moves into an open one, and does nothing on a leaf.
Left collapses an open parent, or moves to the parent row.
Home and End jump to the first and last visible row.
Enter or Space selects the focused row.

Right-to-left

Indentation uses margin-inline-start, so it flips in a right-to-left page, and the chevron points in the reading direction.

Not built

Drag and drop, virtualization, checkboxes, and lazy loading.

Need one of these? Make a request on Discord or add an issue (work item) on Heptapod.

Properties

Property	Attribute	Type	Default
`nodes`The tree data.	`nodes`	`TreeNode[]`	`[]`
`value`The selected node id.	`value`	`string`	`""`
`expanded`The expanded node ids (controlled). Toggling updates this and emits `dj-expand-change`.	`expanded`	`string[]`	`[]`
`expandOnRowClick`Expand or collapse a parent when its row is clicked, not only its chevron. Off by default, because a row click means "select" in a tree whose rows are all selectable. Turn it on when some rows exist only to contain others — an account above its mail folders, a directory above its files — where clicking the row would otherwise do nothing at all. Selection still happens and `dj-select` still fires; this only adds the toggle. Leaf rows are unaffected.	`expand-on-row-click` reflected	`boolean`	`false`

Events

Event	Description
`dj-expand-change`	detail `{ id, expanded, expandedIds }`
`dj-select`	detail `{ id }`

Slots

Slot	Description
`none`	content comes from `nodes`

CSS parts

Style these with dj-tree::part(name).

Part	Description
`row`	a node's clickable line
`chevron`
`label`
`count`

CSS custom properties

Property	Default	Description
`--dj-tree-indent`	`1.1rem`	Indentation added per nesting level.
`--dj-tree-count-color`	`var(--dj-color-text-muted)`	Color of the trailing count badge.

Types

The types that the properties above use, as they are declared in the source.

`TreeNode`

export interface TreeNode {
  id: string;
  label: string;
  children?: TreeNode[];
  /** A registered icon name (see `@dojo-ng/icon`), shown before the label. */
  icon?: string;
  /** A trailing count badge (e.g. an unread count). */
  count?: number;
}