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
2005Greenf34add77
1972Oranged144cfab
1971Red8fa39e90
1961Green8d9f41d8
1992Blue84f1314c
1969White770b1729
1997Green12bbb1e9
Total:$29,002.00
BMW
2000Bluefa3a2ee2
1997Silver68e237ef
1993Orange53debd89
1972Greene652e1d4
1983Green4ca91378
Total:$50,475.00
Fiat
2002Maroon127d6849
1992Red0eb96c1b
1998Silvereb047968
1966Blue2bf0c0dd
1999Yellow99be9ee3
1982Red5a4d1e4d
Total:$26,504.00
Ford
1977Brown73745b53
1966Blue2274eebc
1983Blue88623df8
2000Silver1458d571
1967Black4bee1c4b
Total:$84,100.00
Honda
1961Browne4c121c1
1982Yellow2f53c765
1980Bluef7b80fa1
Total:$20,677.00
Jaguar
1970Orange3c20dacb
2000Orange64b78904
1968Green152e8542
1972Brownfbe5ed4c
1969Silver43a25e92
1994Green12ace53a
1997Green4eda8263
1966Brown231faadd
Total:$33,157.00
Mercedes
2002Maroon63cf9d03
1975Maroon95542c58
1962Brownb9c7e451
Total:$19,772.00
Renault
1984White0f0f37fa
1969Brown04b80146
1995Maroon3ae1eb37
2005Whited33575d5
Total:$49,251.00
Volkswagen
1989Orange15271051
2006Red22aee6b0
1986Orange9aff4cac
Total:$80,181.00
Volvo
1992Black4bebc219
1995Orange374fe5a2
2005Yellowa46c1a53
1989Browne19fa86d
1960Yellowcfb12b43
1964Silver9a27f549
Total:$23,692.00

Rowspan

BrandYearColorId
Audi2005Greenf34add77
Audi1972Oranged144cfab
Audi1971Red8fa39e90
Audi1961Green8d9f41d8
Audi1992Blue84f1314c
Audi1969White770b1729
Audi1997Green12bbb1e9
BMW2000Bluefa3a2ee2
BMW1997Silver68e237ef
BMW1993Orange53debd89
BMW1972Greene652e1d4
BMW1983Green4ca91378
Fiat2002Maroon127d6849
Fiat1992Red0eb96c1b
Fiat1998Silvereb047968
Fiat1966Blue2bf0c0dd
Fiat1999Yellow99be9ee3
Fiat1982Red5a4d1e4d
Ford1977Brown73745b53
Ford1966Blue2274eebc
Ford1983Blue88623df8
Ford2000Silver1458d571
Ford1967Black4bee1c4b
Honda1961Browne4c121c1
Honda1982Yellow2f53c765
Honda1980Bluef7b80fa1
Jaguar1970Orange3c20dacb
Jaguar2000Orange64b78904
Jaguar1968Green152e8542
Jaguar1972Brownfbe5ed4c
Jaguar1969Silver43a25e92
Jaguar1994Green12ace53a
Jaguar1997Green4eda8263
Jaguar1966Brown231faadd
Mercedes2002Maroon63cf9d03
Mercedes1975Maroon95542c58
Mercedes1962Brownb9c7e451
Renault1984White0f0f37fa
Renault1969Brown04b80146
Renault1995Maroon3ae1eb37
Renault2005Whited33575d5
Volkswagen1989Orange15271051
Volkswagen2006Red22aee6b0
Volkswagen1986Orange9aff4cac
Volvo1992Black4bebc219
Volvo1995Orange374fe5a2
Volvo2005Yellowa46c1a53
Volvo1989Browne19fa86d
Volvo1960Yellowcfb12b43
Volvo1964Silver9a27f549
<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.