DataTable - Row Grouping - since v6.0.11

Rows can be grouped in two ways, using rowGroup component or with groupRow attribute on a column.

Documentation

Header Row

YearColorId
Audi
2001White8ff02c2e
1960Orange6e3ab92a
1976Silver617e1523
Total:$40,230.00
BMW
2009Whited2491564
1986Yellowa56619c4
1964Maroonf98bd3d5
1961Blackb5b8e6f0
1965White035ea5cb
1974Yellow120df2a7
Total:$4,273.00
Fiat
1975Red602608e8
1972Blueabff41d9
1990White28d45c72
1971Green5af65b58
2002Green274246e5
1986White2a0761ef
Total:$76,044.00
Ford
1993White29bd1514
1961Blackbf422ef9
1982Bluefd71846e
1971Orange7c40b2b6
1997Silver35c28dd8
Total:$92,144.00
Honda
1983Green18eb255c
1996Green1a771110
1988Brownc9a2f842
1979Yellow4a1c300c
Total:$45,033.00
Jaguar
1989Blacka36d7b7c
1966Black6acac6f7
1980Orange8d8be573
2004Blue7ea15d7c
2004Silver7291b8bd
2002Green5508d4b5
1970Red3ff3dafb
2006Green966cee3a
1961Brownea776b79
1997Maroonfe18b1b0
Total:$84,881.00
Mercedes
1960Black3df14cd5
1960Yellowe4f7b82b
1972Blacke89a4474
1975Redf42bbf94
1989Yellow84814d4c
Total:$84,575.00
Renault
1998Yellow4cb9546f
2003Yellowdb4087d9
Total:$99,979.00
Volkswagen
1974Green75c3f4b7
2007Red76a47619
1984Orangeda82642a
1962Green537fb64f
1964Silver5c6ca285
Total:$15,395.00
Volvo
2008Redb4d617da
1964Red2988c9da
1977Black7ec5bfad
1962Yellow0e1c7ef4
Total:$76,522.00

Rowspan

BrandYearColorId
Audi2001White8ff02c2e
Audi1960Orange6e3ab92a
Audi1976Silver617e1523
BMW2009Whited2491564
BMW1986Yellowa56619c4
BMW1964Maroonf98bd3d5
BMW1961Blackb5b8e6f0
BMW1965White035ea5cb
BMW1974Yellow120df2a7
Fiat1975Red602608e8
Fiat1972Blueabff41d9
Fiat1990White28d45c72
Fiat1971Green5af65b58
Fiat2002Green274246e5
Fiat1986White2a0761ef
Ford1993White29bd1514
Ford1961Blackbf422ef9
Ford1982Bluefd71846e
Ford1971Orange7c40b2b6
Ford1997Silver35c28dd8
Honda1983Green18eb255c
Honda1996Green1a771110
Honda1988Brownc9a2f842
Honda1979Yellow4a1c300c
Jaguar1989Blacka36d7b7c
Jaguar1966Black6acac6f7
Jaguar1980Orange8d8be573
Jaguar2004Blue7ea15d7c
Jaguar2004Silver7291b8bd
Jaguar2002Green5508d4b5
Jaguar1970Red3ff3dafb
Jaguar2006Green966cee3a
Jaguar1961Brownea776b79
Jaguar1997Maroonfe18b1b0
Mercedes1960Black3df14cd5
Mercedes1960Yellowe4f7b82b
Mercedes1972Blacke89a4474
Mercedes1975Redf42bbf94
Mercedes1989Yellow84814d4c
Renault1998Yellow4cb9546f
Renault2003Yellowdb4087d9
Volkswagen1974Green75c3f4b7
Volkswagen2007Red76a47619
Volkswagen1984Orangeda82642a
Volkswagen1962Green537fb64f
Volkswagen1964Silver5c6ca285
Volvo2008Redb4d617da
Volvo1964Red2988c9da
Volvo1977Black7ec5bfad
Volvo1962Yellow0e1c7ef4
<h3 class="first">Header Row</h3>
<h:form>
    <p:dataTable var="car" value="#{dtRowGroupView.cars}" sortBy="#{car.brand}" expandableRowGroups="true">
        <p:headerRow>
            <p:column colspan="3">
                <h:outputText value="#{car.brand}" />
            </p:column>
        </p:headerRow>
        <p:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>
        <p:column headerText="Id">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:summaryRow>
            <p:column colspan="2" style="text-align:right">
                <h:outputText value="Total:" />
            </p:column>
            <p:column>
                <h:outputText value="#{dtRowGroupView.randomPrice}">
                    <f:convertNumber type="currency" currencySymbol="$" />
                </h:outputText>
            </p:column>
        </p:summaryRow>
    </p:dataTable>
</h:form>

<h3>Rowspan</h3>
<h:form>
    <p:dataTable var="car" value="#{dtRowGroupView.cars}" sortBy="#{car.brand}">
        <p:column headerText="Brand" groupRow="true">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>
        <p:column headerText="Id">
            <h:outputText value="#{car.id}" />
        </p:column>
    </p:dataTable>
</h:form>

FREE THEMES

Built-in component themes created by the PrimeFaces Theme Designer.

nova-light Nova-Light
nova-dark Nova-Dark
nova-colored Nova-Colored
luna-blue Luna-Blue
luna-amber Luna-Amber
luna-green Luna-Green
luna-pink Luna-Pink
omega Omega

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.