Mirage LIVE PREVIEW

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
1974Red09bd78f7
1969Yellow85a356e3
1981Silver584be8f6
1962Green1cd8bff8
1998Yellowa8a5e48e
Total:$13,947.00
BMW
1987Silverd52d1f0a
1963Black94ac8118
1980Whitea805d181
1966Brown71cc5c48
Total:$15,153.00
Fiat
1979Silverd2767eb6
2001Orange52024994
1989Silvereef7dcd2
Total:$13,007.00
Ford
1986White79e60f06
1992Orange23a8ff8d
1970Silver69b6814f
1971White2f3897c4
2004White8004a5ba
2002Redcadb0fb6
Total:$88,660.00
Honda
1966Black0277a04f
1960Brown60c4cbda
1961Blue144e8fe4
1986Bluef5bf82bb
2002Black720245c0
2006Greenb8d81f39
2008Orangeee0b4e83
1963Green5470f9c4
Total:$83,898.00
Jaguar
2004Maroone7e1bd07
1985Green2d155df2
1994Bluec66d3451
1981Maroonab1046ab
Total:$8,276.00
Mercedes
1971Green9c6f6ba7
1986Bluec85e1eed
1979Yellow81bf8b1f
1985Redc5c087dc
2003Yellowfc481deb
Total:$75,943.00
Renault
1991Whitea41028d6
1997Orangeba61942b
2004Blackf25512dd
1976White434ad4ee
Total:$59,524.00
Volkswagen
1965Orange52a9de27
1983Whitefbde41ad
2005White1ba085ef
1984Silvera47476f5
1981Yellow4a6ebf48
1967Brownb849bc89
Total:$88,417.00
Volvo
1989White48a50ed4
2005Browna725740f
1989Brown23272bfc
1976Blackde9ac421
1960Silver5402145e
Total:$12,591.00

Rowspan

BrandYearColorId
Audi1974Red09bd78f7
Audi1969Yellow85a356e3
Audi1981Silver584be8f6
Audi1962Green1cd8bff8
Audi1998Yellowa8a5e48e
BMW1987Silverd52d1f0a
BMW1963Black94ac8118
BMW1980Whitea805d181
BMW1966Brown71cc5c48
Fiat1979Silverd2767eb6
Fiat2001Orange52024994
Fiat1989Silvereef7dcd2
Ford1986White79e60f06
Ford1992Orange23a8ff8d
Ford1970Silver69b6814f
Ford1971White2f3897c4
Ford2004White8004a5ba
Ford2002Redcadb0fb6
Honda1966Black0277a04f
Honda1960Brown60c4cbda
Honda1961Blue144e8fe4
Honda1986Bluef5bf82bb
Honda2002Black720245c0
Honda2006Greenb8d81f39
Honda2008Orangeee0b4e83
Honda1963Green5470f9c4
Jaguar2004Maroone7e1bd07
Jaguar1985Green2d155df2
Jaguar1994Bluec66d3451
Jaguar1981Maroonab1046ab
Mercedes1971Green9c6f6ba7
Mercedes1986Bluec85e1eed
Mercedes1979Yellow81bf8b1f
Mercedes1985Redc5c087dc
Mercedes2003Yellowfc481deb
Renault1991Whitea41028d6
Renault1997Orangeba61942b
Renault2004Blackf25512dd
Renault1976White434ad4ee
Volkswagen1965Orange52a9de27
Volkswagen1983Whitefbde41ad
Volkswagen2005White1ba085ef
Volkswagen1984Silvera47476f5
Volkswagen1981Yellow4a6ebf48
Volkswagen1967Brownb849bc89
Volvo1989White48a50ed4
Volvo2005Browna725740f
Volvo1989Brown23272bfc
Volvo1976Blackde9ac421
Volvo1960Silver5402145e
<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>