Locale

Input Style

Free Themes

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

PrimeOne Design

Saga Saga
Vela Vela
Arya Arya

Premium Themes

Premium themes are only available exclusively for PrimeFaces Theme Designer subscribers and therefore not included in PrimeFaces core.

bootstrap4-blue-light Bootstrap Blue
bootstrap4-purple-light Bootstrap Purple
bootstrap4-blue-dark Bootstrap Blue
bootstrap4-purple-dark Bootstrap Purple

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 Watch11%29%$83,929.00$49,021.00
Black Watch93%90%$1,350.00$63,015.00
Blue Band45%24%$60,133.00$32,585.00
Blue T-Shirt44%43%$34,860.00$3,266.00
Brown Purse4%23%$15,947.00$85,916.00
Chakra Bracelet4%11%$18,022.00$41,229.00
Galaxy Earrings21%13%$60,732.00$68,194.00
Game Controller74%77%$50,283.00$45,727.00
Gaming Set76%7%$73,319.00$73,295.00
Gold Phone Case88%46%$38,687.00$18,554.00
Totals:$437,262$480,802
Dynamic Columns
PlayerGoals
20102011201220132014
Lionel Messi33352517
Cristiano Ronaldo44196927
Arjen Robben3146441847
Franck Ribery4949441126
Ronaldinho144182843
Luis Suarez2548284845
Sergio Aguero4343144449
Zlatan Ibrahimovic2942413811
Neymar Jr54133332
Andres Iniesta332491218

<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>