OrganizationChart
OrganizationChart visualizes hierarchical organization data.
Import #
import { OrganizationChartModule } from 'primeng/organizationchart';Basic #
OrganizationChart requires a collection of TreeNode instances as a value.
Argentina | |||||||||||||||||||||||||||||||||||||||
|
| ||||||||||||||||||||||||||||||||||||||
Template #
Custom content instead of a node label is defined using the pTemplate property.
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.
Colored #
Styling a specific node is configured with class and style options of a TreeNode.
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. |
