OrganizationChart visualizes hierarchical organization data.
import OrganizationChart from 'primevue/organizationchart';
OrganizationChart requires a collection of TreeNode instances as a value.
Argentina | |||||||||||||||||||||||||||||||||||||||
|
|
<OrganizationChart :value="data">
<template #default="slotProps">
<span>{{ slotProps.node.label }}</span>
</template>
</OrganizationChart>
The type property of an OrganizationChartNode is used to map a template to a node. If it is undefined, the default template is used.
<OrganizationChart :value="data" collapsible>
<template #country="slotProps">
<div class="flex flex-column align-items-center">
<img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`w-2rem shadow-2 flag flag-${slotProps.node.data}`" />
<div class="mt-3 font-medium text-lg">{{ slotProps.node.label }}</div>
</div>
</template>
<template #default="slotProps">
<span>{{slotProps.node.data.label}}</span>
</template>
</OrganizationChart>
Selection is enabled by defining the selectionMode to either "single" or "multiple" and specifying the selectionKeys with the v-model directive. Note that selection on a particular node can be disabled if the selectable is false on the node instance.
<OrganizationChart v-model:selectionKeys="selection" :value="data" collapsible selectionMode="multiple">
<template #person="slotProps">
<div class="flex flex-column">
<div class="flex flex-column align-items-center">
<img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-3 w-3rem h-3rem" />
<span class="font-bold mb-2">{{ slotProps.node.data.name }}</span>
<span>{{ slotProps.node.data.title }}</span>
</div>
</div>
</template>
<template #default="slotProps">
<span>{{ slotProps.node.label }}</span>
</template>
</OrganizationChart>
Styling a specific node is configured with styleClass and style options of a TreeNode.
<OrganizationChart :value="data" collapsible>
<template #person="slotProps">
<div class="flex flex-column">
<div class="flex flex-column align-items-center">
<img :alt="slotProps.node.data.name" :src="slotProps.node.data.image" class="mb-3 w-3rem h-3rem" />
<span class="font-bold mb-2">{{ slotProps.node.data.name }}</span>
<span>{{ slotProps.node.data.title }}</span>
</div>
</div>
</template>
<template #default="slotProps">
<span>{{ slotProps.node.label }}</span>
</template>
</OrganizationChart>
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. |
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. |