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:orgchart
Attributes (move mouse over the names to see data types)
Name Description
bindingAn EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
chartClassCSS class to apply to the chart container.
converterEL expression resolves to a converter instance or literal converter ID defining a component converter.
depthThe depth of the chart to initially display.Default is 999.
directionThe direction of the chart. 't2b' (top to bottom), 'b2t' (bottom to top), 'l2r' (left to right), 'r2l' (right to left).Default is t2b.
draggableEnable dragging nodes on the chart.Default is false.
exportButtonEnable export button on the chart.Default is false.
exportFileextensionThe file extension for the exported chart.Default is png.
exportFilenameThe filename for the exported chart.Default is OrgChart.
extenderName of javascript function to extend the widget.
filterableRender built-in filter controls for client-side node filtering.Default is false.
idUnique identifier of the component in a namingContainer.Default is generated.
nodeContentThe node content property name.Default is title.
nodeIdThe node id property name.Default is id.
nodeTitleThe node title property name.Default is name.
panEnable panning on the chart.Default is false.
parentNodeSymbolThe symbol to indicate a node has children.Default is fa-users.
renderedBoolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
styleInline style of the component.
styleClassStyle class of the component.
toggleSiblingsRespToggle sibling nodes responsively.Default is false.
valueValue of the component.
verticalDepthThe depth at which the chart switches to vertical layout.
widgetVarName of the client side widget.
zoomEnable zooming on the chart.Default is false.
zoominLimitThe maximum zoom-in limit.Default is 7.
zoomoutLimitThe maximum zoom-out limit.Default is 0.5.
PrimeFaces Extensions Showcase - © 2011-2025,PrimeFaces: 16.0.0-SNAPSHOT,PrimeFaces Extensions: 16.0.0-SNAPSHOT,JSF: Apache MyFaces Core 4.0 - Impl 4.0.3,Server: Apache Tomcat (TomEE)/10.1.52 (10.1.4),Build time: 2026-04-13 12:11