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
1986Yellowa12e80b4
2003Maroondf1f19e1
1975Orange8bba86fc
1984Yellowfff182ee
Total:$40,556.00
BMW
1984Red15d87343
1982Redf62b890b
1980Black0a30e930
2002Blue2135271e
Total:$57,707.00
Fiat
1968Whited77f1556
1961Whitee938ea0c
1969White6506cce3
1985Bluef76896e3
2005Silverb384fbce
Total:$22,827.00
Ford
1983Silver14162c2c
1996Black9d548a12
1972White3e1d304c
1973Browna7f4df5e
1996Blue758f5a8e
Total:$65,876.00
Honda
1994Orangeb705655a
1986Orange2428ae8f
1965Black0d567aab
1962Whited5f42f21
1963Yellow149ba864
Total:$69,719.00
Jaguar
1988Silver50d852e9
1992Blue32a8371a
2001Yellowea32d0d0
2006Blue63b5e5b3
1998Maroon854df82f
1999Yellow822fb1fa
2004Brownfc91f920
1978Whitea537ea86
Total:$24,538.00
Mercedes
1983Greeneab0a9aa
1983Yellow6e3a620f
1969Silver2503926c
1966Whitea0f5de0c
1973Greenfeea8172
Total:$24,256.00
Renault
2007Brown3e47caad
1976Silver286df818
1970Red46054401
1980Blackf6320e64
1975Brown17ad0190
Total:$99,035.00
Volkswagen
1974White1db27501
1995Orange4099f338
1994Yellowc06033e5
1997Red3ec6a948
1971Maroon786a744a
Total:$83,241.00
Volvo
1990Yellow98d2c21a
1961White9f1b76ac
2002Yellowc948921a
1995Rede9d8f6d2
Total:$67,729.00

Rowspan

BrandYearColorId
Audi1986Yellowa12e80b4
Audi2003Maroondf1f19e1
Audi1975Orange8bba86fc
Audi1984Yellowfff182ee
BMW1984Red15d87343
BMW1982Redf62b890b
BMW1980Black0a30e930
BMW2002Blue2135271e
Fiat1968Whited77f1556
Fiat1961Whitee938ea0c
Fiat1969White6506cce3
Fiat1985Bluef76896e3
Fiat2005Silverb384fbce
Ford1983Silver14162c2c
Ford1996Black9d548a12
Ford1972White3e1d304c
Ford1973Browna7f4df5e
Ford1996Blue758f5a8e
Honda1994Orangeb705655a
Honda1986Orange2428ae8f
Honda1965Black0d567aab
Honda1962Whited5f42f21
Honda1963Yellow149ba864
Jaguar1988Silver50d852e9
Jaguar1992Blue32a8371a
Jaguar2001Yellowea32d0d0
Jaguar2006Blue63b5e5b3
Jaguar1998Maroon854df82f
Jaguar1999Yellow822fb1fa
Jaguar2004Brownfc91f920
Jaguar1978Whitea537ea86
Mercedes1983Greeneab0a9aa
Mercedes1983Yellow6e3a620f
Mercedes1969Silver2503926c
Mercedes1966Whitea0f5de0c
Mercedes1973Greenfeea8172
Renault2007Brown3e47caad
Renault1976Silver286df818
Renault1970Red46054401
Renault1980Blackf6320e64
Renault1975Brown17ad0190
Volkswagen1974White1db27501
Volkswagen1995Orange4099f338
Volkswagen1994Yellowc06033e5
Volkswagen1997Red3ec6a948
Volkswagen1971Maroon786a744a
Volvo1990Yellow98d2c21a
Volvo1961White9f1b76ac
Volvo2002Yellowc948921a
Volvo1995Rede9d8f6d2
<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.