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
1994Silver9d18f240
1985Red51137601
1982Greena137afa0
Total:$10,108.00
BMW
1980Black766fa54d
2003Greenff38fd9c
2008Brownde6cdf93
1977Orangedaaa7ac9
1978Green2a1f7be8
2008Maroon87126981
1971Whiteb8c892d0
2008Silver18da2604
1995Brown02abcc91
1984Black1a3d956c
Total:$86,095.00
Fiat
1963Yellowd1f9affb
1998Green3e0decb2
Total:$52,408.00
Ford
2004Black9eafd1fa
1967White45c16bcd
1961Yellowecc8874f
Total:$96,094.00
Honda
1994Whiteff398615
1968Greene7d52b0c
1962Brown85199246
Total:$67,183.00
Jaguar
1962Brown135864be
1984Maroonb24b3ba3
1993Maroon25dfecb6
1972Blue47e32811
1968Redbe83d98d
1960Brown27ec6c88
1970Silvera428b19b
1969Yellow32e9143a
Total:$64,956.00
Mercedes
1991Red92638895
1977Orange4d013568
1983Greenf4aee34c
1983Black0cf60cc2
1991Bluebf3dc855
1986Orangef9ccc90f
1991Brown5b82b4cd
Total:$97,992.00
Renault
1997Whitefcbbdda5
1987Red6acef3d1
1984Green29dc2b4f
Total:$94,350.00
Volkswagen
1967Brownb166ef81
2009Brown48b1d3d6
2006Yellowa98ad61e
2004Redc1f765d8
Total:$41,298.00
Volvo
1962Blue8fdaddd6
1970Red5b06af75
1999Silverb520193b
1960Maroonf0e09048
1981Redf100928e
1997Whitea8952fab
1994Yellowc5e610e4
Total:$27,309.00

Rowspan

BrandYearColorId
Audi1994Silver9d18f240
Audi1985Red51137601
Audi1982Greena137afa0
BMW1980Black766fa54d
BMW2003Greenff38fd9c
BMW2008Brownde6cdf93
BMW1977Orangedaaa7ac9
BMW1978Green2a1f7be8
BMW2008Maroon87126981
BMW1971Whiteb8c892d0
BMW2008Silver18da2604
BMW1995Brown02abcc91
BMW1984Black1a3d956c
Fiat1963Yellowd1f9affb
Fiat1998Green3e0decb2
Ford2004Black9eafd1fa
Ford1967White45c16bcd
Ford1961Yellowecc8874f
Honda1994Whiteff398615
Honda1968Greene7d52b0c
Honda1962Brown85199246
Jaguar1962Brown135864be
Jaguar1984Maroonb24b3ba3
Jaguar1993Maroon25dfecb6
Jaguar1972Blue47e32811
Jaguar1968Redbe83d98d
Jaguar1960Brown27ec6c88
Jaguar1970Silvera428b19b
Jaguar1969Yellow32e9143a
Mercedes1991Red92638895
Mercedes1977Orange4d013568
Mercedes1983Greenf4aee34c
Mercedes1983Black0cf60cc2
Mercedes1991Bluebf3dc855
Mercedes1986Orangef9ccc90f
Mercedes1991Brown5b82b4cd
Renault1997Whitefcbbdda5
Renault1987Red6acef3d1
Renault1984Green29dc2b4f
Volkswagen1967Brownb166ef81
Volkswagen2009Brown48b1d3d6
Volkswagen2006Yellowa98ad61e
Volkswagen2004Redc1f765d8
Volvo1962Blue8fdaddd6
Volvo1970Red5b06af75
Volvo1999Silverb520193b
Volvo1960Maroonf0e09048
Volvo1981Redf100928e
Volvo1997Whitea8952fab
Volvo1994Yellowc5e610e4
<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.