OrganizationChart

Unstyled compound primitive for rendering hierarchical org data with full control over markup.

Features#

• Compound parts: Root, Nodes, Node, Content, Label, Toggle, ToggleIndicator, Selection
• Connectors and 2D nesting are produced by Nodes; your render function runs once per node
• Selection modes single, multiple and checkbox (with cascade + partial state)
• Controllable collapse and selection via key maps

Usage#

import { OrganizationChart } from 'primereact/organizationchart';

<OrganizationChart.Root value={nodes}>
    <OrganizationChart.Nodes>
        {({ node }) => (
            <OrganizationChart.Node uKey={node.key}>
                <OrganizationChart.Content>
                    <OrganizationChart.Label>{node.label}</OrganizationChart.Label>
                    <OrganizationChart.Toggle>
                        <OrganizationChart.ToggleIndicator match="expanded">▼</OrganizationChart.ToggleIndicator>
                        <OrganizationChart.ToggleIndicator match="collapsed">▶</OrganizationChart.ToggleIndicator>
                    </OrganizationChart.Toggle>
                </OrganizationChart.Content>
            </OrganizationChart.Node>
        )}
    </OrganizationChart.Nodes>
</OrganizationChart.Root>

Behavior#

Recursive Render#

OrganizationChart.Nodes walks the data and calls its render function once per node, identified by uKey. It wraps each node in a .p-organizationchart-tree connector cell and nests children in a .p-organizationchart-subtree, you never write the recursion. The chart is expanded by default; a node's subtree is hidden only when its key is collapsed.

Toggle Indicator#

OrganizationChart.Toggle renders no icon on its own and only appears for nodes that have children. Add OrganizationChart.ToggleIndicator with match="expanded", match="collapsed" or match="always" inside to render per-state content.

Selection#

OrganizationChart.Selection is render-prop based, exposing isSelected, isPartiallySelected and toggle. It is active only when a selectionMode is set on Root; in checkbox mode selection cascades to descendants.

Polymorphism#

Every sub-component takes an as prop. Defaults: Root=Fragment, Nodes=div, Node=div, Content=div, Label=span, Toggle=button, ToggleIndicator=span, Selection=Fragment.

Pass Through#

Accessibility#

Screen Reader#

The root has role="tree" with aria-multiselectable in multiple / checkbox modes. Each connector cell uses role="treeitem" with aria-level, aria-expanded (when expandable) and aria-selected (when selectable). Children are grouped with role="group".

Keyboard Support#