Data
OrgChartNew in 0.8.0
A hierarchy of people or teams with collapsible branches, vertical or horizontal layout, three edge styles and custom node cards.
OrgChartPreview
Click a card to select it. Use arrow keys to move between cards.
Usage
tsx
import { OrgChart } from "@vesture/react";
<OrgChart
orientation="horizontal"
edgeStyle="curve"
data={{
id: "ceo",
name: "Ada Lovelace",
title: "CEO",
children: [{ id: "cto", name: "Grace Hopper", title: "CTO" }],
}}
onNodeClick={(node) => console.log(node.id)}
/>Behavior
- Collapsed nodes behave as leaves, so the layout reflows around them. Control collapsedIds or let the component manage it.
- Arrow keys move between nodes (up/down the tree in vertical mode, left/right in horizontal mode).
- Pass an array as data to render a forest of several roots.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | OrgNodeData | OrgNodeData[] | — | Required. { id; name; title?; avatar?; children?; data? }. |
| orientation | "vertical" | "horizontal" | "vertical" | Tree direction. |
| edgeStyle | "elbow" | "curve" | "straight" | "elbow" | Connector shape. |
| nodeWidth / nodeHeight / gapX / gapY | number | 200 / 64 / 28 / 48 | Spacing. |
| collapsedIds / defaultCollapsedIds / onCollapsedChange | string[] | — | Controlled or uncontrolled collapse state. |
| collapsible | boolean | true | Show +/− toggles and collapse/expand all. |
| selectedId / onNodeClick | string / (node) => void | — | Selection and click handling. |
| renderNode | (node, info) => ReactNode | — | Replaces the card contents. |
| zoom / defaultZoom / onZoomChange / showZoomControls | number / boolean | 1 | Zoom factor (0.4 – 2). |
| height | number | string | 420 | Viewport height; the chart scrolls inside. |