useOrganizationChart

Usage#

import { useOrganizationChart } from '@primereact/headless/organizationchart';

const orgchart = useOrganizationChart({ value: nodes, selectionMode: 'single' });
 
const renderNode = (node: TreeNode, level: number) => (
    <li {...orgchart.getTreeProps(node, level)}>
        <div {...orgchart.getNodeProps(node, () => orgchart.toggleNodeSelect(node.key))}>{node.label}</div>
        {orgchart.isExpandable(node) && !orgchart.isCollapsed(node) && <ul {...orgchart.subtreeProps}>{node.children!.map((c) => renderNode(c, level + 1))}</ul>}
    </li>
);

useOrganizationChart owns the collapse and selection state and exposes prop getters plus predicates to render the chart yourself. The chart is expanded by default, a node is collapsed only when its key is present in collapsedKeys. There is no flat visible list as in useTree; you walk value recursively and skip the children of a collapsed node.

State#

Both collapse and selection are controllable, following the standard value / defaultValue / onChange convention:

• collapsedKeys / defaultCollapsedKeys / onCollapsedChange, a Record<string, boolean> where a key set to true is collapsed.
• selectionKeys / defaultSelectionKeys / onSelectionChange, Record<string, boolean> for single/multiple, or Record<string, { checked, partialChecked }> for checkbox mode.

Recipes#

Controlled collapse#

const [collapsedKeys, setCollapsedKeys] = React.useState({ '0-1': true });
 
const orgchart = useOrganizationChart({
    value: nodes,
    collapsedKeys,
    onCollapsedChange: (e) => setCollapsedKeys(e.value)
});

Call toggleNodeCollapse(key) from a toggle button to flip a node's collapse state.

Selection modes#

selectionMode controls how toggleNodeSelect behaves:

• single, one node at a time.
• multiple, independent toggles.
• checkbox, selecting a node cascades to its descendants and recomputes a partial (partialChecked) state on its ancestors.

const [selectionKeys, setSelectionKeys] = React.useState({});
 
const orgchart = useOrganizationChart({
    value: nodes,
    selectionMode: 'checkbox',
    selectionKeys,
    onSelectionChange: (e) => setSelectionKeys(e.value)
});

In checkbox mode use isPartiallySelected(node) to drive an indeterminate checkbox.

Predicates#

The predicates answer per-node questions while you render:

• isExpandable(node), node has children.
• isCollapsed(node), node is collapsed.
• isSelectable(), a selectionMode is set.
• isSelected(node) / isPartiallySelected(node), selection state.

Lookups#

• findNodeByKey(key), resolve a node from its key.
• getNodeLevel(key), 1-based depth used for aria-level.
• getNodes(), the current value array.

Data attributes#

Every prop object includes data-scope="organizationchart" and a data-part. Boolean state attributes are present only when the condition is true, so selectors like [data-selected] match without further checks.

rootProps#

getTreeProps()#

getNodeProps()#

getCollapseButtonProps()#

subtreeProps#

API#

useOrganizationChart#

Accessibility#

The root is a role="tree" and each node a role="treeitem" with aria-level, aria-expanded for collapse state and aria-selected for selection; children are grouped with role="group". Enter and Space toggle the selection of the focused node. See the primitive docs for the full WAI-ARIA mapping.