Data Displayduskmoonimplemented8 demos

Tree

Tree renders hierarchical data with selection, expansion, and checking.

Import@duskmoon-dev/components/tree

14API sections

60documented props

6behavior scenarios

Key API

treeDataexpandedKeysdefaultExpandedKeysselectedKeysdefaultSelectedKeyscheckedKeys

Usage

When to use

Use it when users need to scan structured content and act on individual records.
Prefer it over ad hoc markup when the content has repeatable fields, hierarchy, or navigation state.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Structured records

Designed for repeated or hierarchical content where users scan, compare, and inspect details.

Stateful interactions

Documents the props that control sorting, selection, expansion, pagination, or value changes where available.

Primary API surface

Tree is most often configured through `treeData`, `expandedKeys`, `defaultExpandedKeys`, `selectedKeys`.

Covered behavior

Renders treeData and expands uncontrolled nodes

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Basic usage

authored

Import the component stylesheet and Tree from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Tree } from "@duskmoon-dev/components/tree";

export function Example() {
  return (<Tree
  checkable
  showLine
  showIcon
  defaultExpandAll
  defaultSelectedKeys={["tokens"]}
  defaultCheckedKeys={["components"]}
  treeData={[
    {
      key: "workspace",
      title: "Workspace",
      icon: "W",
      children: [
        { key: "tokens", title: "Design tokens", icon: "T" },
        { key: "components", title: "Components", icon: "C" },
        {
          key: "release",
          title: "Release",
          icon: "R",
          children: [
            { key: "notes", title: "Notes" },
            { key: "qa", title: "Visual QA" }
          ]
        }
      ]
    }
  ]}
/>);
}

Renders treeData and expands uncontrolled nodes

test-backed

Tree scenario from the component test coverage: renders treedata and expands uncontrolled nodes.

Source

import "@duskmoon-dev/components/styles.css";
import { Tree } from "@duskmoon-dev/components/tree";

export function TreeRendersTreeDataAndExpandsDemo() {
  return (<Tree
  checkable
  showLine
  showIcon
  defaultExpandAll
  defaultSelectedKeys={["tokens"]}
  defaultCheckedKeys={["components"]}
  treeData={[
    {
      key: "workspace",
      title: "Workspace",
      icon: "W",
      children: [
        { key: "tokens", title: "Design tokens", icon: "T" },
        { key: "components", title: "Components", icon: "C" },
        {
          key: "release",
          title: "Release",
          icon: "R",
          children: [
            { key: "notes", title: "Notes" },
            { key: "qa", title: "Visual QA" }
          ]
        }
      ]
    }
  ]}
/>);
}

Supports controlled expanded keys and loadData callback

test-backed

Tree scenario from the component test coverage: supports controlled expanded keys and loaddata callback.

Source

import "@duskmoon-dev/components/styles.css";
import { Tree } from "@duskmoon-dev/components/tree";

export function TreeSupportsControlledExpandedKeysDemo() {
  return (<Tree
  checkable
  showLine
  showIcon
  defaultExpandAll
  defaultSelectedKeys={["tokens"]}
  defaultCheckedKeys={["components"]}
  treeData={[
    {
      key: "workspace",
      title: "Workspace",
      icon: "W",
      children: [
        { key: "tokens", title: "Design tokens", icon: "T" },
        { key: "components", title: "Components", icon: "C" },
        {
          key: "release",
          title: "Release",
          icon: "R",
          children: [
            { key: "notes", title: "Notes" },
            { key: "qa", title: "Visual QA" }
          ]
        }
      ]
    }
  ]}
/>);
}

Supports selected and checked key flows

test-backed

Tree scenario from the component test coverage: supports selected and checked key flows.

Source

import "@duskmoon-dev/components/styles.css";
import { Tree } from "@duskmoon-dev/components/tree";

export function TreeSupportsSelectedAndCheckedDemo() {
  return (<Tree
  checkable
  showLine
  showIcon
  defaultExpandAll
  defaultSelectedKeys={["tokens"]}
  defaultCheckedKeys={["components"]}
  treeData={[
    {
      key: "workspace",
      title: "Workspace",
      icon: "W",
      children: [
        { key: "tokens", title: "Design tokens", icon: "T" },
        { key: "components", title: "Components", icon: "C" },
        {
          key: "release",
          title: "Release",
          icon: "R",
          children: [
            { key: "notes", title: "Notes" },
            { key: "qa", title: "Visual QA" }
          ]
        }
      ]
    }
  ]}
/>);
}

Respects disabled, selectable, showLine, and showIcon markers

test-backed

Tree scenario from the component test coverage: respects disabled, selectable, showline, and showicon markers.

Source

import "@duskmoon-dev/components/styles.css";
import { Tree } from "@duskmoon-dev/components/tree";

export function TreeRespectsDisabledSelectableShowLineDemo() {
  return (<Tree
  checkable
  showLine
  showIcon
  defaultExpandAll
  defaultSelectedKeys={["tokens"]}
  defaultCheckedKeys={["components"]}
  treeData={[
    {
      key: "workspace",
      title: "Workspace",
      icon: "W",
      children: [
        { key: "tokens", title: "Design tokens", icon: "T" },
        { key: "components", title: "Components", icon: "C" },
        {
          key: "release",
          title: "Release",
          icon: "R",
          children: [
            { key: "notes", title: "Notes" },
            { key: "qa", title: "Visual QA" }
          ]
        }
      ]
    }
  ]}
/>);
}

Supports drag and drop callbacks

test-backed

Tree scenario from the component test coverage: supports drag and drop callbacks.

Source

import "@duskmoon-dev/components/styles.css";
import { Tree } from "@duskmoon-dev/components/tree";

export function TreeSupportsDragAndDropDemo() {
  return (<Tree
  checkable
  showLine
  showIcon
  defaultExpandAll
  defaultSelectedKeys={["tokens"]}
  defaultCheckedKeys={["components"]}
  treeData={[
    {
      key: "workspace",
      title: "Workspace",
      icon: "W",
      children: [
        { key: "tokens", title: "Design tokens", icon: "T" },
        { key: "components", title: "Components", icon: "C" },
        {
          key: "release",
          title: "Release",
          icon: "R",
          children: [
            { key: "notes", title: "Notes" },
            { key: "qa", title: "Visual QA" }
          ]
        }
      ]
    }
  ]}
/>);
}

Exposes TreeNode and DirectoryTree subcomponents

test-backed

Tree scenario from the component test coverage: exposes treenode and directorytree subcomponents.

Source

import "@duskmoon-dev/components/styles.css";
import { Tree } from "@duskmoon-dev/components/tree";

export function TreeExposesTreeNodeAndDirectoryTreeDemo() {
  return (<Tree
  checkable
  showLine
  showIcon
  defaultExpandAll
  defaultSelectedKeys={["tokens"]}
  defaultCheckedKeys={["components"]}
  treeData={[
    {
      key: "workspace",
      title: "Workspace",
      icon: "W",
      children: [
        { key: "tokens", title: "Design tokens", icon: "T" },
        { key: "components", title: "Components", icon: "C" },
        {
          key: "release",
          title: "Release",
          icon: "R",
          children: [
            { key: "notes", title: "Notes" },
            { key: "qa", title: "Visual QA" }
          ]
        }
      ]
    }
  ]}
/>);
}

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <Tree
  checkable
  showLine
  showIcon
  defaultExpandAll
  defaultSelectedKeys={["tokens"]}
  defaultCheckedKeys={["components"]}
  treeData={[
    {
      key: "workspace",
      title: "Workspace",
      icon: "W",
      children: [
        { key: "tokens", title: "Design tokens", icon: "T" },
        { key: "components", title: "Components", icon: "C" },
        {
          key: "release",
          title: "Release",
          icon: "R",
          children: [
            { key: "notes", title: "Notes" },
            { key: "qa", title: "Visual QA" }
          ]
        }
      ]
    }
  ]}
/>
</div>

<div data-theme="moonlight">
  <Tree
  checkable
  showLine
  showIcon
  defaultExpandAll
  defaultSelectedKeys={["tokens"]}
  defaultCheckedKeys={["components"]}
  treeData={[
    {
      key: "workspace",
      title: "Workspace",
      icon: "W",
      children: [
        { key: "tokens", title: "Design tokens", icon: "T" },
        { key: "components", title: "Components", icon: "C" },
        {
          key: "release",
          title: "Release",
          icon: "R",
          children: [
            { key: "notes", title: "Notes" },
            { key: "qa", title: "Visual QA" }
          ]
        }
      ]
    }
  ]}
/>
</div>

API

The API reference below lists every parsed exported type or interface for Tree. Start with `treeData`, `expandedKeys`, `defaultExpandedKeys`, `selectedKeys` for common usage.

Types: packages/components/src/components/tree/Tree.types.tsScenarios: packages/components/src/components/tree/Tree.test.tsx

Prop	Type	Required	Description
`treeData`	`T[]`	No	treeData configures Tree.
`expandedKeys`	`TreeKey[]`	No	expandedKeys configures Tree.
`defaultExpandedKeys`	`TreeKey[]`	No	defaultExpandedKeys configures Tree.
`selectedKeys`	`TreeKey[]`	No	selectedKeys configures Tree.
`defaultSelectedKeys`	`TreeKey[]`	No	defaultSelectedKeys configures Tree.
`checkedKeys`	`TreeKey[]`	No	checkedKeys configures Tree.
`defaultCheckedKeys`	`TreeKey[]`	No	defaultCheckedKeys configures Tree.
`checkable`	`boolean`	No	checkable configures Tree.
`selectable`	`boolean`	No	selectable configures Tree.
`multiple`	`boolean`	No	multiple configures Tree.
`disabled`	`boolean`	No	disabled configures Tree.
`showLine`	`boolean`	No	showLine configures Tree.
`showIcon`	`boolean`	No	showIcon configures Tree.
`draggable`	`boolean`	No	draggable configures Tree.
`blockNode`	`boolean`	No	blockNode configures Tree.
`defaultExpandAll`	`boolean`	No	defaultExpandAll configures Tree.
`loadData`	`(node: EventDataNode<T>) => Promise<unknown> \| unknown`	No	loadData configures Tree.
`titleRender`	`(node: T) => ReactNode`	No	titleRender configures Tree.
`onExpand`	`(expandedKeys: TreeKey[], info: TreeExpandInfo<T>) => void`	No	onExpand configures Tree.
`onSelect`	`(selectedKeys: TreeKey[], info: TreeSelectInfo<T>) => void`	No	onSelect configures Tree.
`onCheck`	`(checkedKeys: TreeKey[], info: TreeCheckInfo<T>) => void`	No	onCheck configures Tree.
`onDragStart`	`(info: TreeDragInfo<T>) => void`	No	onDragStart configures Tree.
`onDragEnter`	`(info: TreeDragInfo<T>) => void`	No	onDragEnter configures Tree.
`onDragOver`	`(info: TreeDragInfo<T>) => void`	No	onDragOver configures Tree.
`onDragLeave`	`(info: TreeDragInfo<T>) => void`	No	onDragLeave configures Tree.
`onDragEnd`	`(info: TreeDragInfo<T>) => void`	No	onDragEnd configures Tree.
`onDrop`	`(info: TreeDropInfo<T>) => void`	No	onDrop configures Tree.

TreeDataNodeinterface

Prop	Type	Required	Description
`key`	`TreeKey`	Yes	key configures Tree.
`title`	`ReactNode`	No	title configures Tree.
`children`	`TreeDataNode[]`	No	children configures Tree.
`disabled`	`boolean`	No	disabled configures Tree.
`disableCheckbox`	`boolean`	No	disableCheckbox configures Tree.
`checkable`	`boolean`	No	checkable configures Tree.
`selectable`	`boolean`	No	selectable configures Tree.
`icon`	`ReactNode`	No	icon configures Tree.
`isLeaf`	`boolean`	No	isLeaf configures Tree.
`className`	`string`	No	className configures Tree.

EventDataNodeinterface extends < T extends TreeDataNode = TreeDataNode, > extends TreeDataNode

Prop	Type	Required	Description
`key`	`TreeKey`	Yes	key configures Tree.
`pos`	`string`	Yes	pos configures Tree.
`data`	`T`	Yes	data configures Tree.

TreeEventInfointerface extends <T extends TreeDataNode = TreeDataNode>

Prop	Type	Required	Description
`node`	`EventDataNode<T>`	Yes	node configures Tree.

TreeExpandInfointerface extends < T extends TreeDataNode = TreeDataNode, > extends TreeEventInfo<T>

Prop	Type	Required	Description
`expanded`	`boolean`	Yes	expanded configures Tree.

TreeSelectInfointerface extends < T extends TreeDataNode = TreeDataNode, > extends TreeEventInfo<T>

Prop	Type	Required	Description
`selected`	`boolean`	Yes	selected configures Tree.
`selectedNodes`	`T[]`	Yes	selectedNodes configures Tree.

TreeCheckInfointerface extends < T extends TreeDataNode = TreeDataNode, > extends TreeEventInfo<T>

Prop	Type	Required	Description
`checked`	`boolean`	Yes	checked configures Tree.
`checkedNodes`	`T[]`	Yes	checkedNodes configures Tree.

TreeDragInfointerface extends < T extends TreeDataNode = TreeDataNode, > extends TreeEventInfo<T>

Prop	Type	Required	Description
`event`	`React.DragEvent<HTMLElement>`	Yes	event configures Tree.

TreeDropInfointerface extends < T extends TreeDataNode = TreeDataNode, > extends TreeDragInfo<T>

Prop	Type	Required	Description
`dragNode`	`EventDataNode<T>`	No	dragNode configures Tree.
`dragNodesKeys`	`TreeKey[]`	Yes	dragNodesKeys configures Tree.
`dropPosition`	`number`	Yes	dropPosition configures Tree.
`dropToGap`	`boolean`	Yes	dropToGap configures Tree.

TreeNodePropsinterface extends Omit< ComponentProps<"div">, "title" | "onSelect" >

Prop	Type	Required	Description
`title`	`ReactNode`	No	title configures Tree.
`eventKey`	`TreeKey`	No	eventKey configures Tree.
`children`	`ReactNode`	No	children configures Tree.
`disabled`	`boolean`	No	disabled configures Tree.
`disableCheckbox`	`boolean`	No	disableCheckbox configures Tree.
`selectable`	`boolean`	No	selectable configures Tree.
`checkable`	`boolean`	No	checkable configures Tree.
`icon`	`ReactNode`	No	icon configures Tree.
`isLeaf`	`boolean`	No	isLeaf configures Tree.

TreeKeytype

string | number

TreeNodeComponenttype

ForwardRefExoticComponent< TreeNodeProps & RefAttributes<HTMLDivElement> >

DirectoryTreeComponenttype

<T extends TreeDataNode = TreeDataNode>( props: DirectoryTreeProps<T> & RefAttributes<HTMLDivElement>, ) => ReactElement | null

TreeComponenttype

(<T extends TreeDataNode = TreeDataNode>( props: TreeProps<T> & RefAttributes<HTMLDivElement>, ) => ReactElement | null) & { TreeNode: TreeNodeComponent