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
1977Black9eb98290
1966Black74ab7004
1976Black906e1155
1995Green040caafb
1997Redff13f22a
1970Greend6611246
1965Greendd788ac3
Total:$4,885.00
BMW
1991Red62e46a5e
1976Redf423d532
2001Blue91f151cd
Total:$37,711.00
Fiat
1978Maroon32bfce90
1986Blackf7264be6
1960Orange3ba5edd6
1973White58757683
Total:$58,552.00
Ford
1977Brownea914cd4
1973White9e249717
1987Silverb4b4651a
Total:$81,317.00
Honda
2005Silver0cd95337
1976Blue9160746c
1984Blackfe6b755a
1987Brown5b9cf833
1979Blue325fb6e9
1995Orangedee47aea
1972Maroon11efd38f
1985Brown9778f0ec
1968Orangeb9056bb2
Total:$56,287.00
Jaguar
2006Yellow96376447
2007Black612d07d9
1971Yellowbe72b141
1972Browne3e8f635
Total:$37,979.00
Mercedes
1966Silverbd828659
1969Yellow508a0840
2007Browna4b09b58
1989Blackd4255fd7
Total:$96,769.00
Renault
1977Yellow8314075a
1988Black1b420e70
2006Red569d4bb9
1969Silver1f9f8661
1981Orange81dc555a
Total:$98,951.00
Volkswagen
1974Black1bd474e6
1992Orange39264c12
2007Silvere6c6d60b
1995Whitee7b5f345
1971Brown487e0bdd
1991Red89b5c9c8
Total:$850.00
Volvo
1975Silver50702c5e
2004Orange378af9b1
2007Maroon2d6be332
1962Greenaf482ffe
1984Brown7fbd2a38
Total:$33,774.00

Rowspan

BrandYearColorId
Audi1977Black9eb98290
Audi1966Black74ab7004
Audi1976Black906e1155
Audi1995Green040caafb
Audi1997Redff13f22a
Audi1970Greend6611246
Audi1965Greendd788ac3
BMW1991Red62e46a5e
BMW1976Redf423d532
BMW2001Blue91f151cd
Fiat1978Maroon32bfce90
Fiat1986Blackf7264be6
Fiat1960Orange3ba5edd6
Fiat1973White58757683
Ford1977Brownea914cd4
Ford1973White9e249717
Ford1987Silverb4b4651a
Honda2005Silver0cd95337
Honda1976Blue9160746c
Honda1984Blackfe6b755a
Honda1987Brown5b9cf833
Honda1979Blue325fb6e9
Honda1995Orangedee47aea
Honda1972Maroon11efd38f
Honda1985Brown9778f0ec
Honda1968Orangeb9056bb2
Jaguar2006Yellow96376447
Jaguar2007Black612d07d9
Jaguar1971Yellowbe72b141
Jaguar1972Browne3e8f635
Mercedes1966Silverbd828659
Mercedes1969Yellow508a0840
Mercedes2007Browna4b09b58
Mercedes1989Blackd4255fd7
Renault1977Yellow8314075a
Renault1988Black1b420e70
Renault2006Red569d4bb9
Renault1969Silver1f9f8661
Renault1981Orange81dc555a
Volkswagen1974Black1bd474e6
Volkswagen1992Orange39264c12
Volkswagen2007Silvere6c6d60b
Volkswagen1995Whitee7b5f345
Volkswagen1971Brown487e0bdd
Volkswagen1991Red89b5c9c8
Volvo1975Silver50702c5e
Volvo2004Orange378af9b1
Volvo2007Maroon2d6be332
Volvo1962Greenaf482ffe
Volvo1984Brown7fbd2a38
<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.