Vue3 OrganizationChart visualizes hierarchical organization data. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.
Setup
Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.
Import
import OrganizationChart from 'primevue/organizationchart';
Getting Started
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'}
}
]
}
]
}
}
}
}
Collapsible Nodes
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
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'}
}
]
}
]
}
}
}
}
Templating
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'
}]
}
]
}
}
}
}
Theming
OrganizationChart supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeVue OrganizationChart showcase for demos and documentation.