arya-blue
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga-blue
vela-blue
OrgChart - Compact Mode
Demonstrates the compact data property. Nodes marked with compact=true render children in a grid inside the parent node, which helps when many children exist. Use the green corner controls to switch between compact and loose views.
About Compact Mode
Set compact=true on a node to display its children in a compact grid inside the parent box.

In this sample, Bo Miao is compact and includes a nested compact node (Si Xuan). Use the green corner controls to switch between compact and loose layouts.
Source

                <style type="text/css">
        .compact-demo .orgchart {
            background: unset;
        }
    </style>

    <h:form id="compactForm">

        <h:panelGroup layout="block" styleClass="compact-demo" style="margin:0 0 0.75rem 0;">
            <pe:orgchart id="orgChart"
                        widgetVar="orgChartCompact"
                        value="#{compactOrgchartController.orgChartNode}"
                        nodeContent="title"
                        parentNodeSymbol="fa-users"
                        pan="true"
                        zoom="true"
                        direction="t2b"
                        style="height:480px">
            </pe:orgchart>
        </h:panelGroup>

        <h:panelGroup layout="block" style="margin:0.75rem 0 0 0;">
            <p:panel header="About Compact Mode">
                Set <code>compact=true</code> on a node to display its children in a compact grid
                inside the parent box.
                <br/><br/>
                In this sample, <strong>Bo Miao</strong> is compact and includes a nested compact node
                (<strong>Si Xuan</strong>). Use the green corner controls to switch between compact and
                loose layouts.
            </p:panel>
        </h:panelGroup>

    </h:form>
            
Components and more
Use Cases
Documentation pe:
Attributes (move mouse over the names to see data types)
Name Description
No attributes available for this component.
PrimeFaces Extensions Showcase - © 2011-2025,PrimeFaces: 15.0.16,PrimeFaces Extensions: 15.0.17-SNAPSHOT,JSF: Apache MyFaces JSF-2.3 Core Impl 2.3.10,Server: Apache Tomcat (TomEE)/9.0.82 (8.0.16),Build time: 2026-06-21 03:14