DEV Community

loading...
Cover image for React OrganizationChart

React OrganizationChart

primetek profile image PrimeTek ・1 min read

React OrganizationChart visualizes hierarchical organization data.

Setup

Refer to PrimeReact setup documentation for download and installation steps for your environment.

Import

import { OrganizationChart } from 'primereact/organizationchart';
Enter fullscreen mode Exit fullscreen mode

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>
    )
}
Enter fullscreen mode Exit fullscreen mode

Templating

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

<OrganizationChart value={data} nodeTemplate={nodeTemplate}></OrganizationChart>
Enter fullscreen mode Exit fullscreen mode
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={`showcase/demo/images/organization/${node.data.avatar}`} style={{ width: '32px' }}/>
                    <div>{node.data.name}</div>
                </div>
            </div>
        );
    }

    if (node.type === "department") {
        return node.label;
    }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Theming

OrganizationChart supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeReact OrganizationChart showcase for demos and documentation.

Discussion (2)

pic
Editor guide
Collapse
ceoshikhar profile image
Shikhar Sharma

So tired of seeing your library's post in my feed everyday. I get it but man, chill out.

Collapse
primetek profile image
PrimeTek Author

Sorry, maybe there is a way to hide it temporarily. We're adding posts for each component.