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
1989Yellow3d17beb5
1961Brownc48c8ccd
1973Silvera423aa54
1967Whitef9f94e25
2002Silver8bc2ad43
Total:$21,656.00
BMW
1973Orange1da5e559
Total:$55,765.00
Fiat
1970Maroon049e6f51
1998Greenff2d0718
1994Whitea36f8978
1966Maroonbb1c0c44
1981Silverd42a856d
1972Red4a002abe
2004Brownf72a7360
1996Yellowac53933f
1986Brownee9ae10a
1994Whiteab17b708
Total:$72,085.00
Ford
2002Brownea9ef122
1996Green02a872a7
1965Whitee6afd404
2008Orangec3185d11
1989Black80cdcc03
Total:$18,960.00
Honda
1991Orange8456bb5f
1972Maroon770fd23e
Total:$17,784.00
Jaguar
1999Brown9050edfe
1991Maroon715a0c25
1979Silver1691dada
Total:$90,727.00
Mercedes
1979Yellow6381ac8e
2009Green3660be4d
1974Orange58b8b36b
2007Greenc33875be
2009Maroonfc922958
1981Orange082306d0
Total:$81,437.00
Renault
1979Bluefcf32a3a
1987Brown62814840
1983Browne724d6ee
1982Maroon84ddfc5d
2005White498ae68e
1990Maroond445a2ab
1998Yellow740e7afe
1989Redf0c66f51
2005Red7534b21a
Total:$64,403.00
Volkswagen
1987Maroon48e65381
1970Silver730d647c
1985Black4d3529fe
1987Black12f68594
1980Bluee3c1253d
Total:$93,807.00
Volvo
1980Maroon412bf7dc
1976Red2a6093d8
1971Yellow7a26a69d
1994Silvercc9c8af5
Total:$87,526.00

Rowspan

BrandYearColorId
Audi1989Yellow3d17beb5
Audi1961Brownc48c8ccd
Audi1973Silvera423aa54
Audi1967Whitef9f94e25
Audi2002Silver8bc2ad43
BMW1973Orange1da5e559
Fiat1970Maroon049e6f51
Fiat1998Greenff2d0718
Fiat1994Whitea36f8978
Fiat1966Maroonbb1c0c44
Fiat1981Silverd42a856d
Fiat1972Red4a002abe
Fiat2004Brownf72a7360
Fiat1996Yellowac53933f
Fiat1986Brownee9ae10a
Fiat1994Whiteab17b708
Ford2002Brownea9ef122
Ford1996Green02a872a7
Ford1965Whitee6afd404
Ford2008Orangec3185d11
Ford1989Black80cdcc03
Honda1991Orange8456bb5f
Honda1972Maroon770fd23e
Jaguar1999Brown9050edfe
Jaguar1991Maroon715a0c25
Jaguar1979Silver1691dada
Mercedes1979Yellow6381ac8e
Mercedes2009Green3660be4d
Mercedes1974Orange58b8b36b
Mercedes2007Greenc33875be
Mercedes2009Maroonfc922958
Mercedes1981Orange082306d0
Renault1979Bluefcf32a3a
Renault1987Brown62814840
Renault1983Browne724d6ee
Renault1982Maroon84ddfc5d
Renault2005White498ae68e
Renault1990Maroond445a2ab
Renault1998Yellow740e7afe
Renault1989Redf0c66f51
Renault2005Red7534b21a
Volkswagen1987Maroon48e65381
Volkswagen1970Silver730d647c
Volkswagen1985Black4d3529fe
Volkswagen1987Black12f68594
Volkswagen1980Bluee3c1253d
Volvo1980Maroon412bf7dc
Volvo1976Red2a6093d8
Volvo1971Yellow7a26a69d
Volvo1994Silvercc9c8af5
<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.