DataTable - RowExpansion

A row can be expanded to display detail content using a row expansion column and expansion facet.

Expand rows to see detailed information
Model Year
3834f96e1971
08f0203a1993
1b76d6331972
67bf50061997
8630956a1997
f60b0be41962
752074ba1986
98f2caba2005
887ad88d1987

Source

<h:form id="form">
                
    <p:growl id="growl" showDetail="true"/>

    <p:dataTable id="carsTable" var="car" value="#{tableBean.carsSmall}">

        <p:ajax event="rowToggle" listener="#{tableBean.onRowToggle}" update=":form:growl" />

        <f:facet name="header">
            Expand rows to see detailed information
        </f:facet>

        <p:column style="width:2%">
            <p:rowToggler />
        </p:column>

        <p:column style="width:49%">
            <f:facet name="header">
                    Model
            </f:facet>
            <h:outputText value="#{car.model}" />
        </p:column>

        <p:column style="width:49%">
            <f:facet name="header">
                    Year
            </f:facet>
            <h:outputText value="#{car.year}" />
        </p:column>

        <p:rowExpansion>
            <h:panelGrid id="display" columns="2" cellpadding="4" style="width:300px;"
                            styleClass=" ui-widget-content grid">

                <f:facet name="header">
                    <p:graphicImage value="/images/cars/#{car.manufacturer}.jpg"/>
                </f:facet>

                <h:outputText value="Model:" />
                <h:outputText id="model" value="#{car.model}" />

                <h:outputText value="Year:" />
                <h:outputText id="year" value="#{car.year}" />

                <h:outputText value="Manufacturer:" />
                <h:outputText value="#{car.manufacturer}"/>

                <h:outputText value="Color:" />
                <h:outputText value="#{car.color}"/>
            </h:panelGrid>

        </p:rowExpansion>
    </p:dataTable>
</h:form>