OrganizationChart
OrganizationChart visualizes hierarchical organization data.
Import#
import { OrganizationChart } from 'primereact/organizationchart';
Basic#
OrganizationChart requires a collection of TreeNode instances as a value.
<OrganizationChart value={data} />
Template#
Custom content instead of a node label is defined using the nodeTemplate property.
<OrganizationChart value={data} nodeTemplate={nodeTemplate} />
Selection#
Nodes can be selected by defining selectionMode along with a value binding with selection and onSelectionChange properties. By default only one node can be selected, set selectionModeas multiple to select more than one.
<OrganizationChart value={data} selectionMode="multiple" selection={selection} onSelectionChange={(e) => setSelection(e.data)} nodeTemplate={nodeTemplate} />
Colored#
Styling a specific node is configured with className and style options of a TreeNode.
<OrganizationChart value={data} nodeTemplate={nodeTemplate} />
Style#
Following is the list of structural style classes.
| Name | Element |
|---|---|
| p-organizationchart | Container element. |
| p-organizationchart-table | Table container of a node. |
| p-organizationchart-lines | Connector lines container. |
| p-organizationchart-nodes | Contained of node children. |
| p-organizationchart-line-right | Right side line of a node connector. |
| p-organizationchart-line-left | Left side line of a node connector. |
| p-organizationchart-line-top | Top side line of a node connector. |
Accessibility#
Screen Reader
Component currently uses a table based implementation and does not provide high level of screen reader support, a nested list implementation replacement is planned with aria roles and attributes aligned to a tree widget for high level of reader support in the upcoming versions.
Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus through the focusable elements within the chart. |
| enter | Toggles the expanded state of a node. |
| space | Toggles the expanded state of a node. |