Theme
MasterDetail
Straightforward navigation level by level by using of SelectDetailLevel handler. Context values (any objects) are passed from level to level and available via context variables. Level to go to can be set via "level" or "step" attribute (default is step=1 if nothing specified). Text for breadcrumb items is set by "levelLabel" attribute or "label" facet of MasterDetailLevel component.

Attention: You have to reference the pe:masterDetail in the "update" attribute of command components manually if you have any auto updatable components, such as p:growl or p:message with p:autoUpdate, on the page.
SportNumber of countries with leagues
Football4
Basketball3
Ice Hockey2
Source

<pe:masterDetail id="masterDetail" level="#{simpleMasterDetailController.currentLevel}">

    <pe:masterDetailLevel level="1" levelLabel="Sports">
        <p:dataTable id="sports" value="#{simpleMasterDetailController.sports}" var="sport">
            <p:column headerText="Sport">
                <p:commandLink value="#{sport.name}">
                    <pe:selectDetailLevel contextValue="#{sport}"/>
                </p:commandLink>
            </p:column>
            <p:column headerText="Number of countries with leagues">
                <h:outputText value="#{fn:length(sport.countriesWithLeague)}"/>
            </p:column>
        </p:dataTable>
    </pe:masterDetailLevel>

    <pe:masterDetailLevel level="2" contextVar="sport" levelLabel="Countries having #{sport.name} leagues">
        <p:dataTable id="countries" value="#{sport.countriesWithLeague}" var="country">
            <p:column headerText="Country">
                <p:commandLink value="#{country.name}">
                    <pe:selectDetailLevel contextValue="#{country}"/>
                </p:commandLink>
            </p:column>
            <p:column headerText="Code">
                <h:outputText value="#{country.code}"/>
            </p:column>
        </p:dataTable>
    </pe:masterDetailLevel>

    <pe:masterDetailLevel level="3" contextVar="country" levelLabel="#{country.sport} leagues of #{country.name}">
        <p:dataTable id="leauges" value="#{country.leagues}" var="league">
            <p:column headerText="League">
                <h:outputText value="#{league.name}"/>
            </p:column>
            <p:column headerText="Number of teams">
                <h:outputText value="#{league.numberOfTeam}"/>
            </p:column>
        </p:dataTable>
        <h:panelGrid columns="2" style="margin-top: 10px">
            <p:commandButton value="Go to Sports" icon="pi pi-fast-backward">
                <pe:selectDetailLevel level="1"/>
            </p:commandButton>
            <p:commandButton value="Go to Countries" icon="pi pi-step-backward">
                <pe:selectDetailLevel step="-1"/>
            </p:commandButton>
        </h:panelGrid>
    </pe:masterDetailLevel>

</pe:masterDetail>
            
Components and more
Documentation
Attributes (move mouse over the names to see data types)
Name Description
id Unique identifier of the component in a naming container.
rendered Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding An EL expression referring to a server side UIComponent instance in a backing bean.
level Current level in flow. It can be arbitrary initialized and gets updated with each navigation. It allows to show any initial level when a view with MasterDetail component(s) is displayed. Default is 1.
contextValue Context value for the current level. It can be arbitrary initialized at beginning and gets updated with each navigation. Default is null.
selectLevelListener Method with signature int methodName(SelectLevelEvent). Server-side listener invoking when a navigation attempt takes place (via pe:selectDetailLevel). Return value defines the level to go. Default is null.
showBreadcrumb Flag whether a breadcrumb navigation is shown or not. Default is true.
showAllBreadcrumbItems Per default breadcrumb items right from the current level are not shown. This flag allows to show all breadcrumb items right from the current level as disabled. Default is false.
breadcrumbAboveHeader Boolean flag to allow rendering of breadcrumb above or below header facet. Default is true.
style Style of the main MasterDetail container element. Default is null.
styleClass Style class of the main MasterDetail container element. Default is null.
PrimeFaces Extensions Showcase - © 2011-2021,PrimeFaces: 11.0.0,PrimeFaces Extensions: 11.0.3,JSF: Apache MyFaces JSF-2.3 Core API 2.3.9,Server: jetty/9.4.36.v20210114,Build time: 2022-04-17 14:55
occured!