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
1972Blue4d701e05
1993Maroon153a4f2d
1983Orange593362e7
1964Silvera9e587bc
Total:$109.00
BMW
1988Silverf346e715
2005Maroon303d182f
1965Blue9ec656b0
1971Green37f7ee12
1977Orange8c5a8625
Total:$22,190.00
Fiat
2001Maroonf4c12bff
1964Blackfae34b05
1970Silverc26a20ce
1979White7c2afb1e
2007Brown3c97a092
1981Blue17566af5
1999Brown20789605
1994Redb9f916ef
Total:$35,203.00
Ford
1972Brownbffc2953
1976Yellow4a321505
1980Brown4f8c8e80
2009Maroon7b3b3905
1976Silver8b511d42
2003White32cff4af
1960Green7750e870
Total:$70,515.00
Honda
1985Blue8c57cb84
2004Brownc44ff84c
2001Greend00aa014
1980Yellow22f1600e
Total:$45,105.00
Jaguar
2005Brownaebd1631
1977Orangea5706e5e
1999White883f254b
1986Blue6031b3c3
Total:$17,296.00
Mercedes
1978Redfa76fe85
2006Brown778792d6
Total:$36,655.00
Renault
1996Blue816c4839
1970Blue35464f00
1981Black8d0a085c
1986Brownf169e55b
2002Black24a34982
Total:$85,931.00
Volkswagen
1973Green3d2cd708
1964Browne2a3bf0d
1971Silver3fec37fd
1977Silverebdbbd64
Total:$15,809.00
Volvo
1993Black0ab9d769
2003Greena9a49adc
1964Red312e3e2d
1996Red6dd04cc4
1993Black80f312bd
1988Orange45630202
1981Silver08a531f7
Total:$77,502.00

Rowspan

BrandYearColorId
Audi1972Blue4d701e05
Audi1993Maroon153a4f2d
Audi1983Orange593362e7
Audi1964Silvera9e587bc
BMW1988Silverf346e715
BMW2005Maroon303d182f
BMW1965Blue9ec656b0
BMW1971Green37f7ee12
BMW1977Orange8c5a8625
Fiat2001Maroonf4c12bff
Fiat1964Blackfae34b05
Fiat1970Silverc26a20ce
Fiat1979White7c2afb1e
Fiat2007Brown3c97a092
Fiat1981Blue17566af5
Fiat1999Brown20789605
Fiat1994Redb9f916ef
Ford1972Brownbffc2953
Ford1976Yellow4a321505
Ford1980Brown4f8c8e80
Ford2009Maroon7b3b3905
Ford1976Silver8b511d42
Ford2003White32cff4af
Ford1960Green7750e870
Honda1985Blue8c57cb84
Honda2004Brownc44ff84c
Honda2001Greend00aa014
Honda1980Yellow22f1600e
Jaguar2005Brownaebd1631
Jaguar1977Orangea5706e5e
Jaguar1999White883f254b
Jaguar1986Blue6031b3c3
Mercedes1978Redfa76fe85
Mercedes2006Brown778792d6
Renault1996Blue816c4839
Renault1970Blue35464f00
Renault1981Black8d0a085c
Renault1986Brownf169e55b
Renault2002Black24a34982
Volkswagen1973Green3d2cd708
Volkswagen1964Browne2a3bf0d
Volkswagen1971Silver3fec37fd
Volkswagen1977Silverebdbbd64
Volvo1993Black0ab9d769
Volvo2003Greena9a49adc
Volvo1964Red312e3e2d
Volvo1996Red6dd04cc4
Volvo1993Black80f312bd
Volvo1988Orange45630202
Volvo1981Silver08a531f7
<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.