Locale

Change the locale of the datepicker, schedule and client side validation messages.

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.

Bootstrap light blue and dark blue themes are also included in PrimeFaces 10.x builds for Elite subscribers.

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 Watch9%5%$48,337.00$73,972.00
Black Watch24%44%$87,045.00$79,287.00
Blue Band0%87%$36,117.00$63,180.00
Blue T-Shirt52%66%$79,544.00$25,772.00
Brown Purse48%66%$46,249.00$62,703.00
Chakra Bracelet60%36%$32,617.00$44,399.00
Galaxy Earrings25%51%$10,745.00$46,681.00
Game Controller19%2%$83,781.00$77,886.00
Gaming Set81%35%$28,340.00$52,087.00
Gold Phone Case41%86%$33,203.00$78,001.00
Totals:$485,978$603,968
Dynamic Columns
PlayerGoals
20102011201220132014
Lionel Messi134121324
Cristiano Ronaldo1412481022
Arjen Robben157403736
Franck Ribery461529221
Ronaldinho825173122
Luis Suarez1619362043
Sergio Aguero493926025
Zlatan Ibrahimovic254664612
Neymar Jr2418508
Andres Iniesta40733410

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