DataTable - Row Grouping - since v6.0.11

Rows can be grouped in two ways, using rowGroup component or with groupRow attribute on a column.

Header Row

YearColorId
Audi
2002Bluee2eeeeed
1967Blackec66438e
1984Marooncfb07d83
1981Oranged81fc0ee
1981Green8924a51f
1994Black68338f83
2008Blue89a5473d
Total:$49,281.00
BMW
1976Black6e62640b
1998Yellow40c6c242
Total:$10,864.00
Fiat
1986Silver677a9b33
1986Blue8fbb231b
1969Yellow8cb0a079
1982Brownfc632878
1997Blue5f6f93d3
1965Green9cd7e840
1976Blue92494916
2001Maroon861b8b55
1988Redf8251928
2004Brown0d9bc513
1965Orange2396a1d1
Total:$38,933.00
Ford
1962Silver9ea843dd
1966Silver1d4bffd4
1975Silver71690d87
Total:$88,977.00
Honda
1972Green5e1a4589
2007Yellow7f2a3150
1984Red93c2e970
1993Red639a8325
Total:$12,473.00
Jaguar
1978Silver8f057a8e
1966Maroon5e6d0f42
1971Blue0d1b3b19
2009Black422a4aa9
1975Red0a83f433
Total:$9,488.00
Mercedes
1968Yellowbbb2824f
1975Silver13b2eb34
1967Maroonbb878ed1
2009White76443f11
1961Reda00b2616
2005Blackbbe91db5
1989Green46656ec3
Total:$28,231.00
Renault
1968Silver0c0e9a60
1990Black34b4c54f
1967Brown6cd6df0c
1973Maroone04c5a79
1982Bluec30fb940
1970Orangef3ee8d05
2008Green3322545e
Total:$92,883.00
Volkswagen
2006Blue2944bedf
1996Black83efe7e2
Total:$70,694.00
Volvo
2005Green40b72cb6
1969Brown65353d7a
Total:$95,692.00

Rowspan

BrandYearColorId
Audi2002Bluee2eeeeed
Audi1967Blackec66438e
Audi1984Marooncfb07d83
Audi1981Oranged81fc0ee
Audi1981Green8924a51f
Audi1994Black68338f83
Audi2008Blue89a5473d
BMW1976Black6e62640b
BMW1998Yellow40c6c242
Fiat1986Silver677a9b33
Fiat1986Blue8fbb231b
Fiat1969Yellow8cb0a079
Fiat1982Brownfc632878
Fiat1997Blue5f6f93d3
Fiat1965Green9cd7e840
Fiat1976Blue92494916
Fiat2001Maroon861b8b55
Fiat1988Redf8251928
Fiat2004Brown0d9bc513
Fiat1965Orange2396a1d1
Ford1962Silver9ea843dd
Ford1966Silver1d4bffd4
Ford1975Silver71690d87
Honda1972Green5e1a4589
Honda2007Yellow7f2a3150
Honda1984Red93c2e970
Honda1993Red639a8325
Jaguar1978Silver8f057a8e
Jaguar1966Maroon5e6d0f42
Jaguar1971Blue0d1b3b19
Jaguar2009Black422a4aa9
Jaguar1975Red0a83f433
Mercedes1968Yellowbbb2824f
Mercedes1975Silver13b2eb34
Mercedes1967Maroonbb878ed1
Mercedes2009White76443f11
Mercedes1961Reda00b2616
Mercedes2005Blackbbe91db5
Mercedes1989Green46656ec3
Renault1968Silver0c0e9a60
Renault1990Black34b4c54f
Renault1967Brown6cd6df0c
Renault1973Maroone04c5a79
Renault1982Bluec30fb940
Renault1970Orangef3ee8d05
Renault2008Green3322545e
Volkswagen2006Blue2944bedf
Volkswagen1996Black83efe7e2
Volvo2005Green40b72cb6
Volvo1969Brown65353d7a
<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>