Source: https://primereact.org/organizationchart/

Introducing PrimeReact v11 Alpha 🥁Learn More

• SearchK

• 10.9.7

  • v11(11.0.0)

  • v10(10.9.7)

  • v9(9.6.3)

• FEATURES

• API

• THEMING

• PASS THROUGH

OrganizationChart

OrganizationChart visualizes hierarchical organization data.

Import#

---

import { OrganizationChart } from 'primereact/organizationchart';
         

Copy

Basic#

---

OrganizationChart requires a collection of TreeNode instances as a value.

Argentina

    

Argentina

    

| | | --- | | Argentina | | |

| | | --- | | Croatia | | |

France

    

| | | --- | | France | | |

| | | --- | | Morocco | | |

<OrganizationChart value={data} />
         

Copy

Template#

---

Custom content instead of a node label is defined using the nodeTemplate property.

Argentina

    

Argentina

    

| | | --- | | <br><br>Argentina | | |

| | | --- | | <br><br>Croatia | | |

France

    

| | | --- | | <br><br>France | | |

| | | --- | | <br><br>Morocco | | |

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

Copy

Selection#

---

Nodes can be selected by defining selectionMode along with a value binding with selection and onSelectionChange properties. By default only one node can be selected, set _selectionMode_as multiple to select more than one.

Amy ElsnerCEO

    

Anna FaliCMO

    

| | | --- | | Sales | | |

| | | --- | | Marketing | | |

Stephen ShawCTO

    

| | | --- | | Development | | |

| | | --- | | UI/UX Design | | |

<OrganizationChart value={data} selectionMode="multiple" selection={selection} onSelectionChange={(e) => setSelection(e.data)} nodeTemplate={nodeTemplate} />
         

Copy

Colored#

---

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

Amy ElsnerCEO

    

Anna FaliCMO

    

| | | --- | | Sales | | |

| | | --- | | Marketing | | |

Stephen ShawCTO

    

| | | --- | | Development | | |

| | | --- | | UI/UX Design | | |

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

Copy

Accessibility#

---

Screen Reader

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.

Keyboard Support

| 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. | | numpad enter | Toggles the expanded state of a node. |

• Import

• Basic

• Template

• Selection

• Colored

• Accessibility

PrimeReact 10.9.7 by PrimeTek