OrganizationChart

Import via Module

import { OrganizationChart } from 'primereact/organizationchart';
 

Import via CDN

<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/organizationchart/organizationchart.min.js"></script>
 

Getting Started

OrganizationChart requires a model of TreeNode as its value.

export const OrganizationChartDemo = () => {

    const data = [{
        label: 'F.C Barcelona',
        expanded: true,
        children: [
            {
                label: 'F.C Barcelona',
                expanded: true,
                children: [
                    {
                        label: 'Chelsea FC'
                    },
                    {
                        label: 'F.C. Barcelona'
                    }
                ]
            },
            {
                label: 'Real Madrid',
                expanded: true,
                children: [
                    {
                        label: 'Bayern Munich'
                    },
                    {
                        label: 'Real Madrid'
                    }
                ]
            }
        ]
    }];

    return (
        <OrganizationChart value={data}></OrganizationChart>
    )
}
 

Templating

Label of the treenode is displayed inside the node content by default and templating enables further customization.

<OrganizationChart value={data} nodeTemplate={nodeTemplate}></OrganizationChart>
 

const nodeTemplate = (node) => {
    if (node.type === "person") {
        return (
            <div>
                <div className="node-header">{node.label}</div>
                    <div className="node-content">
                        <img alt={node.data.avatar} src={`images/organization/${node.data.avatar}`} style={{ width: '32px' }}/>
                    <div>{node.data.name}</div>
                </div>
            </div>
        );
    }

    if (node.type === "department") {
        return node.label;
    }
}
 

Expand/Collapse State

In order to display a treenode as expanded by default, set "expanded" property as true in your model.

Selection

OrganizationChart supports two selection methods; single or multiple. Selection is enabled by setting selectionMode property to the corresponding mode, defining selection property along with selectionChange callback.

<OrganizationChart value={data} selectionMode="single" selection={selectedNode} onSelectionChange={event => setSelectedNode(event.data)}></OrganizationChart>
 

Properties

Events

Styling

Following is the list of structural style classes.

Accessibility

This section is under development. After the necessary tests and improvements are made, it will be shared with the users as soon as possible.

Dependencies

None.