OrganizationChart
OrganizationChart visualizes hierarchical organization data.
Import #
import { OrganizationChartModule } from 'primeng/organizationchart';
Basic #
OrganizationChart requires a collection of TreeNode instances as a value.
<p-organizationChart [value]="data"></p-organizationChart>
Template #
Custom content instead of a node label is defined using the pTemplate property.
<p-organizationChart [value]="data">
<ng-template let-node pTemplate="default">
<div class="p-2 text-center">
<img src="https://primefaces.org/cdn/primeng/images/flag/flag_placeholder.png" [alt]="node.label" [class]="'flag' + ' flag-' + node.data" width="32" />
<div>{{ node.data.name }}</div>
<div class="p-2">{{ node.label }}</div>
</div>
</ng-template>
</p-organizationChart>
Selection #
Nodes can be selected by defining selectionMode along with a value binding with selection properties. By default only one node can be selected, set selectionMode as multiple to select more than one.
<p-organizationChart [value]="data" selectionMode="multiple" [(selection)]="selectedNodes">
<ng-template let-node pTemplate="person">
<div class="p-2 text-center">
<img [src]="node.data.image" class="mb-3 w-3rem h-3rem" />
<div class="font-bold">{{ node.data.name }}</div>
<div>{{ node.data.title }}</div>
</div>
</ng-template>
</p-organizationChart>
Colored #
Styling a specific node is configured with class and style options of a TreeNode.
<p-organizationChart [value]="data">
<ng-template let-node pTemplate="person">
<div class="p-2 text-center">
<img [src]="node.data.image" class="mb-3 w-3rem h-3rem" />
<div class="font-bold">{{ node.data.name }}</div>
<div>{{ node.data.title }}</div>
</div>
</ng-template>
</p-organizationChart>
Style #
Following is the list of structural style classes, for theming classes visit theming page.
| 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. |
OrganizationChart API
API defines helper props, events and others for the PrimeNG OrganizationChart module.
OrganizationChart #
OrganizationChart visualizes hierarchical organization data.
Properties #
Defines the input properties of the component.
Emitters #
Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.
| name | parameters | description | |
|---|---|---|---|
| selectionChange | value : any | Callback to invoke on selection change. | |
| onNodeSelect | event : OrganizationChartNodeSelectEvent | Callback to invoke when a node is selected. | |
| onNodeUnselect | Callback to invoke when a node is unselected. | ||
| onNodeExpand | event : OrganizationChartNodeExpandEvent | Callback to invoke when a node is expanded. | |
| onNodeCollapse | Callback to invoke when a node is collapsed. |
Templates #
Defines the templates used by the component.
Events #
Defines the custom events used by the component's emitters.
OrganizationChartNodeSelectEvent #
Custom node select event.
OrganizationChartNodeUnSelectEvent #
Custom node unselect event.
OrganizationChartNodeExpandEvent #
Custom node expand event.
OrganizationChartNodeCollapseEvent #
Custom node collapse event.