OrganizationChart
OrganizationChart visualizes hierarchical organization data.
Import #
import { OrganizationChartModule } from 'primeng/organizationchart';
Basic #
OrganizationChart requires a collection of TreeNode instances as a value.
Argentina | |||||||||||||||||||||||||||||||||||||||||||
|
| ||||||||||||||||||||||||||||||||||||||||||
<p-organizationChart [value]="data" />
Template #
Custom content instead of a node label is defined using the pTemplate property.
<p-organizationChart [value]="data" [collapsible]="true">
<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"
[collapsible]="true">
<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" [collapsible]="true">
<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.