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
2000Brown7300b03a
1976Blackfc85bd17
1985Orange3cd859d3
1969Silver3d528cb9
1977Red88c1d2ea
Total:$48,363.00
BMW
1990White3a05c97f
2002Brown2ab19c46
Total:$66,905.00
Fiat
1994Whitef3c9f898
1971Silverd310b0a8
1985Red7f400a18
2007Whitef9307f4b
1971Blue6c240c97
2003Yellowa9911eed
Total:$26,834.00
Ford
1974Red04881a33
Total:$40,718.00
Honda
1987Black754fc75e
2002Black3279a18e
2000Maroon6241b1c5
1964Yellow81e9e78f
1985Whitee6260254
Total:$20,769.00
Jaguar
2001Brown9c69c714
1979Yellow85b2b88a
1978Orange8a6059fa
1971Brown8a2e688d
2004Browne3c9e965
Total:$25,126.00
Mercedes
1981Maroonf7af0e5c
1994Bluee9e6f5c3
1982Red0e16fb7c
1978Maroon21599526
1993Green15b65988
1989Black4a4b7faa
Total:$77,966.00
Renault
1966Orange091b4713
1960Orangee80fc15e
2009Brownca57d0c2
1976Green7516f2d0
Total:$41,451.00
Volkswagen
1991Redf9a5b49e
1965Silvera064e75e
1961Red583c43b9
1996Orange97bcd62c
1982White9385070a
2000Black61e79bff
1995Blackb6c8357d
1990Brown8aa86d0d
1977Blue698a2d75
Total:$35,657.00
Volvo
1970Redb71b7956
1971Red2ed2ba32
1998Black61ac3e81
1967Blue8e02e3d9
1972Blackb42b00cb
1968Black962c7bda
2008Maroona14e1746
Total:$3,650.00

Rowspan

BrandYearColorId
Audi2000Brown7300b03a
Audi1976Blackfc85bd17
Audi1985Orange3cd859d3
Audi1969Silver3d528cb9
Audi1977Red88c1d2ea
BMW1990White3a05c97f
BMW2002Brown2ab19c46
Fiat1994Whitef3c9f898
Fiat1971Silverd310b0a8
Fiat1985Red7f400a18
Fiat2007Whitef9307f4b
Fiat1971Blue6c240c97
Fiat2003Yellowa9911eed
Ford1974Red04881a33
Honda1987Black754fc75e
Honda2002Black3279a18e
Honda2000Maroon6241b1c5
Honda1964Yellow81e9e78f
Honda1985Whitee6260254
Jaguar2001Brown9c69c714
Jaguar1979Yellow85b2b88a
Jaguar1978Orange8a6059fa
Jaguar1971Brown8a2e688d
Jaguar2004Browne3c9e965
Mercedes1981Maroonf7af0e5c
Mercedes1994Bluee9e6f5c3
Mercedes1982Red0e16fb7c
Mercedes1978Maroon21599526
Mercedes1993Green15b65988
Mercedes1989Black4a4b7faa
Renault1966Orange091b4713
Renault1960Orangee80fc15e
Renault2009Brownca57d0c2
Renault1976Green7516f2d0
Volkswagen1991Redf9a5b49e
Volkswagen1965Silvera064e75e
Volkswagen1961Red583c43b9
Volkswagen1996Orange97bcd62c
Volkswagen1982White9385070a
Volkswagen2000Black61e79bff
Volkswagen1995Blackb6c8357d
Volkswagen1990Brown8aa86d0d
Volkswagen1977Blue698a2d75
Volvo1970Redb71b7956
Volvo1971Red2ed2ba32
Volvo1998Black61ac3e81
Volvo1967Blue8e02e3d9
Volvo1972Blackb42b00cb
Volvo1968Black962c7bda
Volvo2008Maroona14e1746
<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.