Input Style

Free Themes

Built-in component themes created by the PrimeFaces Theme Designer.

Saga Saga
Vela Vela
Arya Arya

Legacy Free Themes

Luna Amber Luna Amber
Luna Blue Luna Blue
Luna Green Luna Green
Luna Pink Luna Pink
Nova Nova
Nova Nova Alt
Nova Nova Accent

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.

DataTable Group

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

Product Sales
ProductSale Rate
SalesProfit
Last YearThis YearLast YearThis Year
Bamboo Watch82%20%$24,511.00$84,531.00
Black Watch25%72%$265.00$61,773.00
Blue Band68%60%$8,090.00$71,711.00
Blue T-Shirt79%57%$13,495.00$9,856.00
Brown Purse62%88%$26,226.00$41,233.00
Chakra Bracelet75%40%$56,591.00$11,369.00
Galaxy Earrings69%21%$20,490.00$33,759.00
Game Controller43%24%$4,625.00$74,294.00
Gaming Set25%14%$54,660.00$86,476.00
Gold Phone Case35%0%$15,974.00$25,119.00
Totals:$224,927$500,121
Dynamic Columns
PlayerGoals
20102011201220132014
Lionel Messi1940102130
Cristiano Ronaldo16281416
Arjen Robben2113532
Franck Ribery46613037
Ronaldinho294927229
Luis Suarez4229254735
Sergio Aguero516182820
Zlatan Ibrahimovic2713424744
Neymar Jr172811938
Andres Iniesta73933533

<div class="card">
    <h:form>
        <p:dataTable id="tblSales" var="sale" value="#{dtGroupView.sales}">
            <f:facet name="header">
                <h:outputText value="Product Sales"/>
            </f:facet>

            <p:columnGroup type="header">
                <p:row>
                    <p:column rowspan="3" headerText="Product"/>
                    <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 style="text-align:left" footerText="$#{dtGroupView.lastYearTotal}"/>
                    <p:column style="text-align:left" footerText="$#{dtGroupView.thisYearTotal}"/>
                </p:row>
            </p:columnGroup>

            <f:facet name="footer">
                <h:outputText value="Data between 2013-2014"/>
            </f:facet>
        </p:dataTable>

        <p:dataTable id="tblPlayers" var="player" value="#{dtGroupView.players}" style="margin-top:40px">
            <f:facet name="header">
                <h:outputText value="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">
                <h:outputText value="Data between 2010-2014" styleClass="p-text-bold" />
            </f:facet>
        </p:dataTable>
    </h:form>
</div>