DataTable - Group

DataTable column headers and footers can be combined for grouped display.

Documentation
Sales/Profits of Manufacturers
ManufacturerSale Rate
SalesProfit
Last YearThis YearLast YearThis Year
Totals:\$498,205\$474,684
Apple70%10%$77,149.00$42,715.00
Samsung6%82%$23,328.00$28,320.00
Microsoft91%54%$34,772.00$18,541.00
Philips60%71%$66,932.00$405.00
Sony22%89%$38,950.00$20,192.00
LG28%70%$43,668.00$98,354.00
Sharp81%18%$75,841.00$62,730.00
Panasonic3%67%$63,752.00$47,186.00
HTC62%58%$30,538.00$69,713.00
Nokia38%82%$43,275.00$86,528.00
Dynamic Columns
PlayerGoals
20102011201220132014
Lionel Messi15802729
Cristiano Ronaldo2322263825
Arjen Robben39344659
Franck Ribery104842461
Ronaldinho2114351722
Luis Suarez045371031
Sergio Aguero193727128
Zlatan Ibrahimovic3538482018
Neymar Jr10242346
Andres Iniesta1821321730
<h:form>
    
    <p:dataTable var="sale" value="#{dtGroupView.sales}">
        <f:facet name="header">
            Sales/Profits of Manufacturers
        </f:facet>

        <p:columnGroup type="header">
            <p:row>
                <p:column rowspan="3" headerText="Manufacturer" />
                <p:column colspan="4" headerText="Sale Rate" />
            </p:row>
            <p:row>
                <p:column colspan="2" headerText="Sales" />
                <p:column colspan="2" headerText="Profit" />
            </p:row>
            <p:row>
                <p:column headerText="Last Year" />
                <p:column headerText="This Year" />
                <p:column headerText="Last Year" />
                <p:column headerText="This Year" />
            </p:row>
        </p:columnGroup>

        <p:column>
            <h:outputText value="#{sale.manufacturer}" />
        </p:column>
        <p:column>
            <h:outputText value="#{sale.lastYearProfit}%" />
        </p:column>
        <p:column>
            <h:outputText value="#{sale.thisYearProfit}%" />
        </p:column>
        <p:column>
            <h:outputText value="#{sale.lastYearSale}">
                <f:convertNumber type="currency" currencySymbol="$" />
            </h:outputText>
        </p:column>
        <p:column>
            <h:outputText value="#{sale.thisYearSale}">
                <f:convertNumber type="currency" currencySymbol="$" />
            </h:outputText>
        </p:column>

        <p:columnGroup type="footer">
            <p:row>
                <p:column colspan="3" style="text-align:right" footerText="Totals:" />
                <p:column footerText="\$#{dtGroupView.lastYearTotal}" />

                <p:column footerText="\$#{dtGroupView.thisYearTotal}" />
            </p:row>
        </p:columnGroup>

        <f:facet name="footer">
            Data between 2013-2014
        </f:facet>
    </p:dataTable>
    
    <p:dataTable var="player" value="#{dtGroupView.players}" style="margin-top:40px">
        <f:facet name="header">
            Dynamic Columns
        </f:facet>

        <p:columnGroup type="header">
            <p:row>
                <p:column rowspan="2" headerText="Player" />
                <p:column colspan="#{dtGroupView.yearCount}" headerText="Goals" />
            </p:row>
            <p:row>
                <ui:repeat value="#{dtGroupView.years}" var="year">
                    <p:column headerText="#{year}" />
                </ui:repeat>
            </p:row>
        </p:columnGroup>

        <p:column>
            <h:outputText value="#{player.name}" />
        </p:column>
                        
        <p:columns value="#{dtGroupView.years}" var="year">
            <h:outputText value="#{player.getGoals(year)}" />
        </p:columns>

        <f:facet name="footer">
            Data between 2010-2014
        </f:facet>
    </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.