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
1981Silver288d7d3b
1999Maroon616a9b23
Total:$10,589.00
BMW
1979Orange935b7b00
1966Green4dab5b4a
1993Black0222dbd2
1987Redbd088e40
1999Black5d0ebcc0
1992Yellow689ee1e5
1996Black1ac36129
Total:$87,599.00
Fiat
1995Silver61e588eb
1964Red7f4a6385
1994Maroonea282c99
1966Blacke9d97699
2008Whitea2893be4
1965Blue8da9cd0d
1986Blue10107238
2000Whiteee0c5abf
Total:$85,521.00
Ford
1978Yellow2db7ff43
Total:$114.00
Honda
1967Blue49fc0e09
2002Whiteed4ad743
2003Maroona18fa262
1967Brownbf7f3700
Total:$50,175.00
Jaguar
1985Yelloweb31b4cf
1990Silver37f59153
1998Brown5391ea37
1971Red0f171208
1970Yellow62d33c27
1991Black5361dad4
Total:$68,561.00
Mercedes
2007Red7e62823b
1989Yellow1139b0fc
1976Black0f174b3e
1991Maroone73330c8
Total:$87,432.00
Renault
1967Red0dee8e04
2003Silver24e64add
1976Silverdaeced2e
1976Blue08a01b0b
1994Green8670b764
1995Silver6562783e
2000Oranged815114f
Total:$29,686.00
Volkswagen
1993Whitef97d2dd5
1964White1b7bff23
1976Brownb8ee3452
1989Brownf073702f
Total:$73,420.00
Volvo
1968Silver5c7d512c
2008Orangeeb548a84
2006Bluefabf5b1d
1985Yellow5a00b0d0
1966Maroon9b1c8332
1964Brown44f1eb47
1987Brown7d579db3
Total:$13,347.00

Rowspan

BrandYearColorId
Audi1981Silver288d7d3b
Audi1999Maroon616a9b23
BMW1979Orange935b7b00
BMW1966Green4dab5b4a
BMW1993Black0222dbd2
BMW1987Redbd088e40
BMW1999Black5d0ebcc0
BMW1992Yellow689ee1e5
BMW1996Black1ac36129
Fiat1995Silver61e588eb
Fiat1964Red7f4a6385
Fiat1994Maroonea282c99
Fiat1966Blacke9d97699
Fiat2008Whitea2893be4
Fiat1965Blue8da9cd0d
Fiat1986Blue10107238
Fiat2000Whiteee0c5abf
Ford1978Yellow2db7ff43
Honda1967Blue49fc0e09
Honda2002Whiteed4ad743
Honda2003Maroona18fa262
Honda1967Brownbf7f3700
Jaguar1985Yelloweb31b4cf
Jaguar1990Silver37f59153
Jaguar1998Brown5391ea37
Jaguar1971Red0f171208
Jaguar1970Yellow62d33c27
Jaguar1991Black5361dad4
Mercedes2007Red7e62823b
Mercedes1989Yellow1139b0fc
Mercedes1976Black0f174b3e
Mercedes1991Maroone73330c8
Renault1967Red0dee8e04
Renault2003Silver24e64add
Renault1976Silverdaeced2e
Renault1976Blue08a01b0b
Renault1994Green8670b764
Renault1995Silver6562783e
Renault2000Oranged815114f
Volkswagen1993Whitef97d2dd5
Volkswagen1964White1b7bff23
Volkswagen1976Brownb8ee3452
Volkswagen1989Brownf073702f
Volvo1968Silver5c7d512c
Volvo2008Orangeeb548a84
Volvo2006Bluefabf5b1d
Volvo1985Yellow5a00b0d0
Volvo1966Maroon9b1c8332
Volvo1964Brown44f1eb47
Volvo1987Brown7d579db3
<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.