OrganizationChart visualizes hierarchical organization data.
import { OrganizationChart } from 'primereact/organizationchart';
OrganizationChart requires a model of TreeNode as its value.
<OrganizationChart value={data}></OrganizationChart>
Label of the treenode is displayed inside the node content by default and templating enables further customization.
<OrganizationChart value={data} nodeTemplate={nodeTemplate} selection={selection} selectionMode="multiple" onSelectionChange={event => setSelection(event.data)} className="company"></OrganizationChart>
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. |
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.
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. |