Tree

Displays hierarchical data in a collapsible tree structure. Makes it easy to navigate nested items and manage complex relationships.

Default

Guest

API Reference

Show types
typescript
export type TreeNode = {
  label: string
  children: TreeNode[]
  // added TreeNode[] due to enforcement that dynamic key types should accommodate all static key types
  [nodeKey: string]: string | number | TreeNode[]
}

export interface TreeProps {
  /**
   * Root tree node to render.
   * Can contain nested children to form the tree structure.
   */
  node: TreeNode

  /**
   * Unique key used to identify each node.
   * Usually an id-like property present on every node.
   */
  nodeKey: string

  /**
   * Optional configuration for tree layout and behavior.
   */
  options?: TreeOptions
}

export type TreeOptions = {
  /**
   * Height of each tree row (e.g. "32px").
   */
  rowHeight?: string

  /**
   * Horizontal indentation per tree level.
   */
  indentWidth?: string

  /**
   * Whether to show vertical indentation guide lines.
   */
  showIndentationGuides?: boolean

  /**
   * Whether tree nodes should be collapsed by default.
   */
  defaultCollapsed?: boolean
}
Prop Default Type
node*
TreeNode

Root tree node to render. Can contain nested children to form the tree structure.

nodeKey*
string

Unique key used to identify each node. Usually an id-like property present on every node.

options
{ rowHeight: "25px", indentWidth: "20px", showIndentationGuides: true, defaultCollapsed: true, }
TreeOptions

Optional configuration for tree layout and behavior.

Slot Payload
node

Slot to fully override how a tree node renders

icon

Slot to override only the node expand/collapse icon

label

Slot to override only the node label/content