TreeView

TreeView renders hierarchical data as an expandable, selectable tree. You describe how your items map to a tree via a schema, so it works with either flat data (id/parentId) or nested data (children arrays) without reshaping it first. It supports drag-and-drop reordering, controlled or uncontrolled expansion/selection, per-level icons, and a responsive burger mode.

When to use

• Navigation trees, folder/document hierarchies, org charts, category pickers.
• Any parent/child data users need to expand, select, or reorder.

Import

import { TreeView } from '@spartanfx/react';

Basic usage

items and schema are required. The schema tells the tree which fields identify a node and its children.

<TreeView
  items={items}
  schema={{
    idField: 'id',
    parentIdField: 'parentId',
    labelField: 'name',
  }}
  defaultExpandedIds={['root']}
/>

Flat or nested

The same component handles both shapes. For flat data, point the schema at parentIdField; for nested data, point it at your children field. See ITreeViewSchema for the exact fields.

Controlled expansion & selection

Manage state yourself with the controlled props:

const [expanded, setExpanded] = React.useState<string[]>([]);
const [selected, setSelected] = React.useState<string>();

<TreeView
  items={items}
  schema={schema}
  expandedIds={expanded}
  onExpandedChange={setExpanded}
  selectedId={selected}
  onSelect={(node) => setSelected(node.id)}
/>

Drag-and-drop reordering

<TreeView
  items={items}
  schema={schema}
  enableDragDrop
  onReorder={(next) => persist(next)}
/>

Key props

Prop	Type	Default	Notes
items (required)	TItem[]	—	Flat or nested source data.
schema (required)	ITreeViewSchema	—	Maps fields to tree structure.
expandedIds / defaultExpandedIds	string[]	—	Controlled / uncontrolled expansion.
expandOnClick	boolean	false	Expand on node click vs. caret only.
enableDragDrop	boolean	false	Drag to reorder.
iconsPerLevel	Record<number, ReactNode>	—	Icon per depth level.
burgerBreakpointPx	number	768	Responsive burger threshold.

See the full generated reference: TreeView API ↗.

See also

• Components overview