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
2008Blackf45d59c2
1987Blue9b6afab3
Total:$51,543.00
BMW
1983White6ff3b32c
1968Green5d049989
1992Blue30c0df4a
1967Blue9c6a36b0
Total:$95,223.00
Fiat
1962Green285dac93
2001Red76bb02d9
1962Blue21e29707
Total:$29,953.00
Ford
1999Green1e7460ed
2000Silvera5822310
2005Black679c75a4
1989Blue55877407
2001Red310477c8
1986Blue3e7e72f3
1968Red1e6ee127
Total:$49,842.00
Honda
1998White2f10afe5
1982Black5fefe3c2
1989Yellow9cee83ab
1998White8190d024
Total:$28,431.00
Jaguar
2001Black79eba8e8
1992Red269f9c04
2004Red6a170a67
2005Greenf187f48d
1987Brown1b356ac1
2008Black0a76e5c0
1964Yellow78dc1d19
2000Blue8a26bc7e
1985Greene066f244
Total:$89,988.00
Mercedes
1979Redaec6e408
1985Yellow566e5fa1
1987White3c1e122f
Total:$40,152.00
Renault
1971Maroon65962801
2005Whitee657bc85
1988Browncfc46ced
2003Silver89a84064
1967Maroon5d2c66cd
1990Marooncd22cd42
1975Yellow3b22af50
1999Maroonec91e85b
Total:$37,206.00
Volkswagen
2006White55c5ec71
1970Green948b4940
2003Brown2b956672
1962Silver724afa60
2002Orange5680026f
Total:$95,537.00
Volvo
2002Orange3878d41e
1963Brown4031fc3c
2009Whitedcec46e8
1980Maroon74a987fa
1972Orange8bdf7fd4
Total:$28,936.00

Rowspan

BrandYearColorId
Audi2008Blackf45d59c2
Audi1987Blue9b6afab3
BMW1983White6ff3b32c
BMW1968Green5d049989
BMW1992Blue30c0df4a
BMW1967Blue9c6a36b0
Fiat1962Green285dac93
Fiat2001Red76bb02d9
Fiat1962Blue21e29707
Ford1999Green1e7460ed
Ford2000Silvera5822310
Ford2005Black679c75a4
Ford1989Blue55877407
Ford2001Red310477c8
Ford1986Blue3e7e72f3
Ford1968Red1e6ee127
Honda1998White2f10afe5
Honda1982Black5fefe3c2
Honda1989Yellow9cee83ab
Honda1998White8190d024
Jaguar2001Black79eba8e8
Jaguar1992Red269f9c04
Jaguar2004Red6a170a67
Jaguar2005Greenf187f48d
Jaguar1987Brown1b356ac1
Jaguar2008Black0a76e5c0
Jaguar1964Yellow78dc1d19
Jaguar2000Blue8a26bc7e
Jaguar1985Greene066f244
Mercedes1979Redaec6e408
Mercedes1985Yellow566e5fa1
Mercedes1987White3c1e122f
Renault1971Maroon65962801
Renault2005Whitee657bc85
Renault1988Browncfc46ced
Renault2003Silver89a84064
Renault1967Maroon5d2c66cd
Renault1990Marooncd22cd42
Renault1975Yellow3b22af50
Renault1999Maroonec91e85b
Volkswagen2006White55c5ec71
Volkswagen1970Green948b4940
Volkswagen2003Brown2b956672
Volkswagen1962Silver724afa60
Volkswagen2002Orange5680026f
Volvo2002Orange3878d41e
Volvo1963Brown4031fc3c
Volvo2009Whitedcec46e8
Volvo1980Maroon74a987fa
Volvo1972Orange8bdf7fd4
<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.