Data DisplayDmduskmoonimplemented5 demos

DmTree

DmTree browses hierarchical records with selection and contextual toolbar actions.

Import@duskmoon-dev/components/dm-tree

9API sections

53documented props

3behavior scenarios

Key API

titlekeylabelicondisabledonClick

Usage

When to use

Use it in DuskMoon application screens that need a packaged, opinionated workflow component.
Reach for the lower-level standard component when the screen needs custom composition.

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

DuskMoon workflow wrapper

Wraps lower-level primitives into a higher-level DuskMoon-prefixed workflow API.

Application defaults

Examples show the defaults and composition points expected by internal DuskMoon app screens.

Primary API surface

DmTree is most often configured through `title`, `key`, `label`, `icon`.

Covered behavior

Normalizes fieldNames and emits Dm onChange payload

Feature Demos

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

Preview

Root Node
- Child Node 1
- Child Node 2

Basic usage

authored

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

Source

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

export function Example() {
  return (<DmTree
  treeData={[
    {
      key: "root",
      title: "Root Node",
      children: [
        { key: "child-1", title: "Child Node 1" },
        { key: "child-2", title: "Child Node 2" }
      ]
    }
  ]}
/>);
}

Preview

Root Node
- Child Node 1
- Child Node 2

Normalizes fieldNames and emits Dm onChange payload

test-backed

DmTree scenario from the component test coverage: normalizes fieldnames and emits dm onchange payload.

Source

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

export function DmTreeNormalizesFieldNamesAndEmitsDemo() {
  return (<DmTree
  treeData={[
    {
      key: "root",
      title: "Root Node",
      children: [
        { key: "child-1", title: "Child Node 1" },
        { key: "child-2", title: "Child Node 2" }
      ]
    }
  ]}
/>);
}

Preview

Root Node
- Child Node 1
- Child Node 2

Supports search, all item, and item toolbar actions

test-backed

DmTree scenario from the component test coverage: supports search, all item, and item toolbar actions.

Source

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

export function DmTreeSupportsSearchAllItemDemo() {
  return (<DmTree
  treeData={[
    {
      key: "root",
      title: "Root Node",
      children: [
        { key: "child-1", title: "Child Node 1" },
        { key: "child-2", title: "Child Node 2" }
      ]
    }
  ]}
/>);
}

Preview

Root Node
- Child Node 1
- Child Node 2

Renders top toolbar, loading, empty, and option tree variants

test-backed

DmTree scenario from the component test coverage: renders top toolbar, loading, empty, and option tree variants.

Source

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

export function DmTreeRendersTopToolbarLoadingDemo() {
  return (<DmTree
  treeData={[
    {
      key: "root",
      title: "Root Node",
      children: [
        { key: "child-1", title: "Child Node 1" },
        { key: "child-2", title: "Child Node 2" }
      ]
    }
  ]}
/>);
}

Preview

Sunshine Theme

Root Node
- Child Node 1
- Child Node 2

Moonlight Theme

Root Node
- Child Node 1
- Child Node 2

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">
  <DmTree
  treeData={[
    {
      key: "root",
      title: "Root Node",
      children: [
        { key: "child-1", title: "Child Node 1" },
        { key: "child-2", title: "Child Node 2" }
      ]
    }
  ]}
/>
</div>

<div data-theme="moonlight">
  <DmTree
  treeData={[
    {
      key: "root",
      title: "Root Node",
      children: [
        { key: "child-1", title: "Child Node 1" },
        { key: "child-2", title: "Child Node 2" }
      ]
    }
  ]}
/>
</div>

API

The API reference below lists every parsed exported type or interface for DmTree. Start with `title`, `key`, `label`, `icon` for common usage.

Types: packages/components/src/components/dm-tree/DmTree.types.tsScenarios: packages/components/src/components/dm-tree/DmTree.test.tsx

DmTreeFieldNamesinterface extends < TDataNode extends DmTreeDataNode = TreeDataNode, >

Prop	Type	Required	Description
`title`	`keyof TDataNode \| string`	No	title configures DmTree.
`key`	`keyof TDataNode \| string`	No	key configures DmTree.
`children`	`keyof TDataNode \| string`	No	children configures DmTree.

DmTreeToolbarButtoninterface extends < TDataNode extends DmTreeDataNode = TreeDataNode, >

Prop	Type	Required	Description
`label`	`ReactNode`	Yes	label configures DmTree.
`icon`	`ReactNode`	No	icon configures DmTree.
`disabled`	`boolean`	No	disabled configures DmTree.
`onClick`	`(`	No	onClick configures DmTree.
`selectedKey`	`TreeKey \| undefined,`	Yes	selectedKey configures DmTree.
`getSelectedItem`	`() => TDataNode \| undefined,`	Yes	getSelectedItem configures DmTree.

DmTreeItemActioninterface extends < TDataNode extends DmTreeDataNode = TreeDataNode, >

Prop	Type	Required	Description
`icon`	`ReactNode`	Yes	icon configures DmTree.
`title`	`string`	No	title configures DmTree.
`disabled`	`boolean \| ((item: TDataNode) => boolean)`	No	disabled configures DmTree.
`show`	`boolean \| ((item: TDataNode) => boolean)`	No	show configures DmTree.
`onClick`	`(item: TDataNode) => void`	No	onClick configures DmTree.

DmTreeAllIteminterface

Prop	Type	Required	Description
`value`	`TreeKey`	Yes	value configures DmTree.
`label`	`ReactNode`	Yes	label configures DmTree.

DmTreeCommonPropsinterface extends < TDataNode extends DmTreeDataNode = TreeDataNode, > extends Omit< TreeProps<TreeDataNode>, "treeData" | "children" | "onChange" | "onSelect" | "titleRender" >

Prop	Type	Required	Description
`treeData`	`TDataNode[]`	Yes	treeData configures DmTree.
`selectedKey`	`TreeKey`	No	selectedKey configures DmTree.
`showAll`	`boolean`	No	showAll configures DmTree.
`allItem`	`DmTreeAllItem`	No	allItem configures DmTree.
`selectedKey`	`TreeKey \| undefined,`	Yes	selectedKey configures DmTree.
`getSelectedItem`	`() => TDataNode \| undefined,`	Yes	getSelectedItem configures DmTree.
`selectedKey`	`TreeKey \| undefined,`	Yes	selectedKey configures DmTree.
`getSelectedItem`	`() => TDataNode \| undefined,`	Yes	getSelectedItem configures DmTree.
`customTopToolbar`	`ReactNode`	No	customTopToolbar configures DmTree.
`itemToolbarAlwaysShow`	`boolean`	No	itemToolbarAlwaysShow configures DmTree.
`beforeSelect`	`(`	No	beforeSelect configures DmTree.
`selectItem`	`TDataNode,`	Yes	selectItem configures DmTree.
`selectedKey`	`TreeKey,`	Yes	selectedKey configures DmTree.
`beforeSelectKey`	`TreeKey \| undefined,`	Yes	beforeSelectKey configures DmTree.
`onChange`	`(`	No	onChange configures DmTree.
`selectItem`	`TDataNode \| undefined,`	Yes	selectItem configures DmTree.
`selectKey`	`TreeKey \| undefined,`	Yes	selectKey configures DmTree.
`beforeSelectKey`	`TreeKey \| undefined,`	Yes	beforeSelectKey configures DmTree.
`loading`	`boolean`	No	loading configures DmTree.
`showSearch`	`boolean`	No	showSearch configures DmTree.
`searchPlaceholder`	`string`	No	searchPlaceholder configures DmTree.
`customSearch`	`(event: React.ChangeEvent<HTMLInputElement>) => void`	No	customSearch configures DmTree.
`beforeIcon`	`ReactNode \| ((item: TDataNode) => ReactNode)`	No	beforeIcon configures DmTree.
`emptyNode`	`ReactNode`	No	emptyNode configures DmTree.
`width`	`number \| string`	No	width configures DmTree.
`minNodeWidth`	`number \| string`	No	minNodeWidth configures DmTree.
`fieldNames`	`DmTreeFieldNames<TDataNode>`	No	fieldNames configures DmTree.

DmTreeOptionIteminterface extends < TDataNode extends DmTreeDataNode = TreeDataNode, > extends Omit<DmTabsItem, "children">

Prop	Type	Required	Description
`loading`	`boolean`	No	loading configures DmTree.
`TreeSetting`	`DmTreeCommonProps<TDataNode>`	Yes	TreeSetting configures DmTree.

DmTreeOptionPropsinterface extends < TDataNode extends DmTreeDataNode = TreeDataNode, > extends Omit<ComponentProps<"div">, "onChange">

Prop	Type	Required	Description
`isTabTree`	`true`	Yes	isTabTree configures DmTree.
`items`	`DmTreeOptionItem<TDataNode>[]`	Yes	items configures DmTree.
`defaultActiveKey`	`string`	No	defaultActiveKey configures DmTree.
`activeKey`	`string`	No	activeKey configures DmTree.
`clearOtherSelection`	`boolean`	No	clearOtherSelection configures DmTree.
`width`	`number \| string`	No	width configures DmTree.
`minNodeWidth`	`number \| string`	No	minNodeWidth configures DmTree.
`onChange`	`(activeKey: string) => void`	No	onChange configures DmTree.

DmTreeDataNodetype

Record<string, unknown> & { key?: TreeKey

DmTreeComponenttype

<TDataNode extends DmTreeDataNode = TreeDataNode>( props: DmTreeProps<TDataNode>, ) => ReactElement | null