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
1984Blue19df37e9
1993Green355fc1dd
2008Yellow120269dd
1978Brown68abbff5
2009Maroon9728bb8e
2006Red73be216e
2000Yellow8fce57cd
1995Yellowdb53427c
1994Blackf9884d80
Total:$42,675.00
BMW
1998Orange18090064
2007Brown8b8a706d
1977White6770dd83
1973Greendd91f846
Total:$2,809.00
Fiat
1968Yellowe0fd80b5
1973Green9a0a754d
2007Brownb123c038
1987Blackdb6b23d9
1970Silverbb394732
Total:$72,183.00
Ford
1995Brown033de4f7
1978Yelloweb99d504
1985Orange19c1679c
Total:$53,399.00
Honda
1992Redc0f55a99
1970Silverd2d108d2
1996Blue449070b1
1981Orangea3e8c0c4
1969Red24cbb457
1997Orange7dcc88f0
1962Silver5c3d0583
2009Brownc4122ac8
Total:$60,938.00
Jaguar
1960Blackb3cf71f2
1970Bluebe3798f6
Total:$91,928.00
Mercedes
1962Maroon4156dd52
1987Silver635ffdec
2004Greenb6f5971f
1974Red40d4126d
1992Orangedaa116dd
2005Browna560cb95
1975Brown40b804df
Total:$94,276.00
Renault
1975Blackdbbc1f21
1973Red7a187004
1996Black4ab6b10b
1996Blue42e6e44d
1963Green24cc55e9
Total:$2,902.00
Volkswagen
1964Maroonbb8c16aa
1960Yellowcb53f943
1991Blackb5c44541
1992Maroon1adb6106
2008Brownd5d1d961
Total:$91,013.00
Volvo
2003Browneeaddf5a
1980Yellow35558ea2
Total:$32,078.00

Rowspan

BrandYearColorId
Audi1984Blue19df37e9
Audi1993Green355fc1dd
Audi2008Yellow120269dd
Audi1978Brown68abbff5
Audi2009Maroon9728bb8e
Audi2006Red73be216e
Audi2000Yellow8fce57cd
Audi1995Yellowdb53427c
Audi1994Blackf9884d80
BMW1998Orange18090064
BMW2007Brown8b8a706d
BMW1977White6770dd83
BMW1973Greendd91f846
Fiat1968Yellowe0fd80b5
Fiat1973Green9a0a754d
Fiat2007Brownb123c038
Fiat1987Blackdb6b23d9
Fiat1970Silverbb394732
Ford1995Brown033de4f7
Ford1978Yelloweb99d504
Ford1985Orange19c1679c
Honda1992Redc0f55a99
Honda1970Silverd2d108d2
Honda1996Blue449070b1
Honda1981Orangea3e8c0c4
Honda1969Red24cbb457
Honda1997Orange7dcc88f0
Honda1962Silver5c3d0583
Honda2009Brownc4122ac8
Jaguar1960Blackb3cf71f2
Jaguar1970Bluebe3798f6
Mercedes1962Maroon4156dd52
Mercedes1987Silver635ffdec
Mercedes2004Greenb6f5971f
Mercedes1974Red40d4126d
Mercedes1992Orangedaa116dd
Mercedes2005Browna560cb95
Mercedes1975Brown40b804df
Renault1975Blackdbbc1f21
Renault1973Red7a187004
Renault1996Black4ab6b10b
Renault1996Blue42e6e44d
Renault1963Green24cc55e9
Volkswagen1964Maroonbb8c16aa
Volkswagen1960Yellowcb53f943
Volkswagen1991Blackb5c44541
Volkswagen1992Maroon1adb6106
Volkswagen2008Brownd5d1d961
Volvo2003Browneeaddf5a
Volvo1980Yellow35558ea2
<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.