import OrganizationChart from 'primevue/organizationchart';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/organizationchart/organizationchart.min.js"></script>
OrganizationChart requires an OrganizationChartNode instance as its root value and at least one template to display node content where node instance is passed via slotProps.
<OrganizationChart :value="data">
<template #default="slotProps">
<span>{{slotProps.node.data.label}}</span>
</template>
</OrganizationChart>
export default {
data() {
return {
data: {
key: '0',
data: {label: 'F.C. Barcelona'},
children: [
{
key: '0_0',
data: {label: 'F.C. Barcelona'},
children: [
{
key: '0_0_0',
data: {label: 'Chelsea F.C.'}
},
{
key: '0_0_1',
data: {label: 'F.C. Barcelona'}
}
]
},
{
key: '0_1',
data: {label: 'Real Madrid'},
children: [
{
key: '0_1_0',
data: {label: 'Bayern Munich'}
},
{
key: '0_1_1',
data: {label: 'Real Madrid'}
}
]
}
]
}
}
}
}
API of the OrganizationChartNode has the properties below.
| Name | Type | Default | Description |
|---|---|---|---|
| key | any | null | Unique identifier of the node. (required) |
| type | string | null | Type of the node to match a template. |
| styleClass | string | null | Style class of the node content. |
| data | any | null | Data represented by the node. |
| selectable | boolean | true | Whether node is selectable when selection is enabled. |
| collapsible | boolean | true | Whether node is collapsible when node expansion is enabled. |
| children | array | null | Children nodes array. |
All nodes are expanded by default however they can be expanded and collapsed when collapsible is enabled. The optional collapsedKeys property defines the keys that are collapsed, this property is two-way binding enabled so that user changes or programmatic changes are reflected to the UI.
Example below displays the root of chart in previous example as collapsed. Notice that the collapsedKeys is a map whose key is the key of the node and value is true.
<OrganizationChart :value="data" :collapsible="true" :collapsedKeys="collapsedKeys">
<template #default="slotProps">
<span>{{slotProps.node.data.label}}</span>
</template>
</OrganizationChart>
export default {
data() {
return {
collapsedKeys: {
'0': true
},
data: {
key: '0',
data: {label: 'F.C. Barcelona'},
children: [
{
key: '0_0',
data: {label: 'F.C. Barcelona'},
children: [
{
key: '0_0_0',
data: {label: 'Chelsea F.C.'}
},
{
key: '0_0_1',
data: {label: 'F.C. Barcelona'}
}
]
},
{
key: '0_1',
data: {label: 'Real Madrid'},
children: [
{
key: '0_1_0',
data: {label: 'Bayern Munich'}
},
{
key: '0_1_1',
data: {label: 'Real Madrid'}
}
]
}
]
}
}
}
}
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 :value="data" selecionMode="single" v-model:selectionKeys="selectionKeys">
<template #default="slotProps">
<span>{{slotProps.node.data.label}}</span>
</template>
</OrganizationChart>
export default {
data() {
return {
selectionKeys: null,
data: {
key: '0',
data: {label: 'F.C. Barcelona'},
children: [
{
key: '0_0',
data: {label: 'F.C. Barcelona'},
children: [
{
key: '0_0_0',
data: {label: 'Chelsea F.C.'}
},
{
key: '0_0_1',
data: {label: 'F.C. Barcelona'}
}
]
},
{
key: '0_1',
data: {label: 'Real Madrid'},
children: [
{
key: '0_1_0',
data: {label: 'Bayern Munich'}
},
{
key: '0_1_1',
data: {label: 'Real Madrid'}
}
]
}
]
}
}
}
}
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">
<template #person="slotProps">
<div class="node-header ui-corner-top">{{slotProps.node.data.label}}</div>
<div class="node-content">
<img :src="'demo/images/organization/' + slotProps.node.data.avatar" width="32">
<div>{{slotProps.node.data.name}}</div>
</div>
</template>
<template #default="slotProps">
<span>{{slotProps.node.data.label}}</span>
</template>
</OrganizationChart>
export default {
data() {
return {
data: {
key: '0',
type: 'person',
styleClass: 'p-person',
data: {label: 'CEO', name: 'Walter White', avatar: 'walter.jpg'},
children: [
{
key: '0_0',
type: 'person',
styleClass: 'p-person',
data: {label: 'CFO', name:'Saul Goodman', avatar: 'saul.jpg'},
children:[{
key: '0_0_0',
data: {label: 'Tax'},
selectable: false,
styleClass: 'department-cfo'
},
{
key: '0_0_1',
data: {label: 'Legal'},
selectable: false,
styleClass: 'department-cfo'
}],
},
{
key: '0_1',
type: 'person',
styleClass: 'p-person',
data: {label: 'COO', name:'Mike E.', avatar: 'mike.jpg'},
children:[{
key: '0_1_0',
data: {label: 'Operations'},
selectable: false,
styleClass: 'department-coo'
}]
},
{
key: '0_2',
type: 'person',
styleClass: 'p-person',
data: {label: 'CTO', name:'Jesse Pinkman', avatar: 'jesse.jpg'},
children:[{
key: '0_2_0',
data: {label: 'Development'},
selectable: false,
styleClass: 'department-cto',
children:[{
key: '0_2_0_0',
data: {label: 'Analysis'},
selectable: false,
styleClass: 'department-cto'
},
{
key: '0_2_0_1',
data: {label: 'Front End'},
selectable: false,
styleClass: 'department-cto'
},
{
key: '0_2_0_2',
data: {label: 'Back End'},
selectable: false,
styleClass: 'department-cto'
}]
},
{
key: '0_2_1',
data: {label: 'QA'},
selectable: false,
styleClass: 'department-cto'
},
{
key: '0_2_2',
data: {label: 'R&D'},
selectable: false,
styleClass: 'department-cto'
}]
}
]
}
}
}
}
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
| Name | Type | Default | Description |
|---|---|---|---|
| value | any | null | Value of the component. |
| selectionKeys | object | null | A map instance of key-value pairs to represented the selected nodes. |
| selectionMode | string | null | Type of the selection, valid values are "single" and "multiple". |
| collapsible | boolean | false | Whether the nodes can be expanded or toggled. |
| collapsedKeys | object | null | A map instance of key-value pairs to represented the collapsed nodes. |
| Name | Parameters | Description |
|---|---|---|
| node-select | node: Node instance | Callback to invoke when a node is selected. |
| node-unselect | node: Node instance | Callback to invoke when a node is unselected. |
| node-expand | node: Node instance | Callback to invoke when a node is expanded. |
| node-collapse | node: Node instance | Callback to invoke when a node is collapsed. |
Following is the list of structural style classes, for theming classes visit
| 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. |
None.