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
1986Maroond1250318
1986Silver3c6b13dd
1966Yellow09478e85
1973Redef64b1d7
1966Red594139a4
1973Brown908a5319
Total:$57,060.00
BMW
1975Black33f88aa4
2001Maroonb05a022f
Total:$93,146.00
Fiat
1992Yellow0e102fe0
1988Green9e674d06
1961Orange9e01a492
2002Orange15ac9c5a
Total:$90,179.00
Ford
1986White57acbe0a
1977White94e8c28d
1999Bluea8c076f5
2005Maroon7949be62
2003Whitec9762b98
2005Greenfc61b9fc
Total:$90,306.00
Honda
1988Red674d0bbf
1983Maroonfc8e4ad3
1972Yellowf754402f
1964Brownc2489b8f
1963Whitefbe11d0a
1976Bluedd53b509
1969Green14bc444c
Total:$33,060.00
Jaguar
1998Yellowae7de787
1990Blue817c945b
1992Maroon5a876378
1981Black889afad5
Total:$73,307.00
Mercedes
1995Blued11284f9
1972Red97258c90
1965Blackd78b05a8
1992Brownb9c5d0f5
2006Blueb7118f12
Total:$5,066.00
Renault
1985White7b96ded1
1973Maroon9bbb3ced
1968Green426d8c1e
1968Orange25e3e2ce
1968Green8872b24b
1988Blue55d4dfa4
1981Silverfbba3a17
Total:$13,085.00
Volkswagen
1996Browncc99466b
1966Brown04300726
1998Reda9cdb6f4
1991Green8fb0d267
1988Blued9976086
Total:$53,962.00
Volvo
1974Blue352b648b
1985Green5e6d1386
1973Brown19fd4b43
1976Blue670f5a6f
Total:$65,637.00

Rowspan

BrandYearColorId
Audi1986Maroond1250318
Audi1986Silver3c6b13dd
Audi1966Yellow09478e85
Audi1973Redef64b1d7
Audi1966Red594139a4
Audi1973Brown908a5319
BMW1975Black33f88aa4
BMW2001Maroonb05a022f
Fiat1992Yellow0e102fe0
Fiat1988Green9e674d06
Fiat1961Orange9e01a492
Fiat2002Orange15ac9c5a
Ford1986White57acbe0a
Ford1977White94e8c28d
Ford1999Bluea8c076f5
Ford2005Maroon7949be62
Ford2003Whitec9762b98
Ford2005Greenfc61b9fc
Honda1988Red674d0bbf
Honda1983Maroonfc8e4ad3
Honda1972Yellowf754402f
Honda1964Brownc2489b8f
Honda1963Whitefbe11d0a
Honda1976Bluedd53b509
Honda1969Green14bc444c
Jaguar1998Yellowae7de787
Jaguar1990Blue817c945b
Jaguar1992Maroon5a876378
Jaguar1981Black889afad5
Mercedes1995Blued11284f9
Mercedes1972Red97258c90
Mercedes1965Blackd78b05a8
Mercedes1992Brownb9c5d0f5
Mercedes2006Blueb7118f12
Renault1985White7b96ded1
Renault1973Maroon9bbb3ced
Renault1968Green426d8c1e
Renault1968Orange25e3e2ce
Renault1968Green8872b24b
Renault1988Blue55d4dfa4
Renault1981Silverfbba3a17
Volkswagen1996Browncc99466b
Volkswagen1966Brown04300726
Volkswagen1998Reda9cdb6f4
Volkswagen1991Green8fb0d267
Volkswagen1988Blued9976086
Volvo1974Blue352b648b
Volvo1985Green5e6d1386
Volvo1973Brown19fd4b43
Volvo1976Blue670f5a6f
<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.