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
1987White8b81c9a2
1962Yellow7a916cba
2005Silver389267c4
1975Yellowe05d2f8f
Total:$42,958.00
BMW
1980Blue32c90fa4
2007Blackbd73a38c
2003Yellowf8eaf92e
1994Redf5cdc73c
Total:$66,397.00
Fiat
1991Green25cb026b
1972Brown86f5084c
2000Silverf29360d8
1998Bluecf4104cc
1981White9f1a5eb8
1968Green5f35bcbd
2009Red88314722
Total:$33,938.00
Ford
2001Maroon33401496
1987White708dd740
1962Silver2ac73327
1967Blue4ce4c252
Total:$84,457.00
Honda
1997Blacke2e7e0f3
1960Black2347b8ea
1969Whitee95d3f1f
1989Browna5224263
1981White5590f49b
Total:$88,757.00
Jaguar
1985Yellowd2e35d81
2005Blackd8186236
1963Silvere558570d
1983Green262a19cb
2004Silvere02d9580
Total:$68,663.00
Mercedes
1983Bluea1312f48
1963Yellowdf2f6fdc
2003Brown32498c0f
1985Green42f5cdb6
1983Maroon77e7b54e
1971Green39839123
1994Yellowf1ddae82
Total:$66,257.00
Renault
1961Greencdf1582d
2009Yellow09c9509b
1992Silver6ac4dd2c
Total:$12,146.00
Volkswagen
1982Silveref14be80
2009White1758895b
Total:$13,026.00
Volvo
1965Orange8f9e1991
1990Brownfe26beb9
2005Blue94e8f84e
1994Blue35d153df
1974White3b30c1d6
1980Silverecd792d5
1994Rede7c51472
1982Orange365c5505
1986Yellow04931531
Total:$92,129.00

Rowspan

BrandYearColorId
Audi1987White8b81c9a2
Audi1962Yellow7a916cba
Audi2005Silver389267c4
Audi1975Yellowe05d2f8f
BMW1980Blue32c90fa4
BMW2007Blackbd73a38c
BMW2003Yellowf8eaf92e
BMW1994Redf5cdc73c
Fiat1991Green25cb026b
Fiat1972Brown86f5084c
Fiat2000Silverf29360d8
Fiat1998Bluecf4104cc
Fiat1981White9f1a5eb8
Fiat1968Green5f35bcbd
Fiat2009Red88314722
Ford2001Maroon33401496
Ford1987White708dd740
Ford1962Silver2ac73327
Ford1967Blue4ce4c252
Honda1997Blacke2e7e0f3
Honda1960Black2347b8ea
Honda1969Whitee95d3f1f
Honda1989Browna5224263
Honda1981White5590f49b
Jaguar1985Yellowd2e35d81
Jaguar2005Blackd8186236
Jaguar1963Silvere558570d
Jaguar1983Green262a19cb
Jaguar2004Silvere02d9580
Mercedes1983Bluea1312f48
Mercedes1963Yellowdf2f6fdc
Mercedes2003Brown32498c0f
Mercedes1985Green42f5cdb6
Mercedes1983Maroon77e7b54e
Mercedes1971Green39839123
Mercedes1994Yellowf1ddae82
Renault1961Greencdf1582d
Renault2009Yellow09c9509b
Renault1992Silver6ac4dd2c
Volkswagen1982Silveref14be80
Volkswagen2009White1758895b
Volvo1965Orange8f9e1991
Volvo1990Brownfe26beb9
Volvo2005Blue94e8f84e
Volvo1994Blue35d153df
Volvo1974White3b30c1d6
Volvo1980Silverecd792d5
Volvo1994Rede7c51472
Volvo1982Orange365c5505
Volvo1986Yellow04931531
<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.