OrganizationChart

OrganizationChart visualizes hierarchical organization data.

Import #


import OrganizationChart from 'primevue/organizationchart';

Basic #

OrganizationChart requires a collection of TreeNode instances as a value.

Argentina

Croatia

France

Morocco


<OrganizationChart :value="data">
    <template #default="slotProps">
        <span>{{ slotProps.node.label }}</span>
    </template>
</OrganizationChart>

Template #

The type property of an OrganizationChartNode is used to map a template to a node. If it is undefined, the default template is used.

Argentina

Croatia

France

Morocco


<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 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 #

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.

Amy ElsnerCEO

Anna FaliCMO

Sales

Marketing

Stephen ShawCTO

Development

UI/UX Design


<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>

Colored #

Styling a specific node is configured with styleClass and style options of a TreeNode.