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.

DataView Lazy

DataView has built-in support to deal with huge datasets. In order to enable lazy loading, a LazyDataModel needs to be implemented to query the datasource when pagination happens. This example uses an in-memory list to mimic a real datasource like a database. In a real application, loading should be executed with the query built using the information passed to the load method.

ui-button
ui-button
  • Name: Adams Morasca
    Country: Argentina
    Company: Feiner Bros
    Representative: Amy Elsner
  • Name: Chavez Briddick
    Country: Japan
    Company: Printing Dimensions
    Representative: Stephen Shaw
  • Name: Kaitlin Ostrosky
    Country: Australia
    Company: Morlong Associates
    Representative: Ivan Magalhaes
  • Name: Izzy Garufi
    Country: France
    Company: Feiner Bros
    Representative: Bernardo Dominic
  • Name: Jeanfrancois Venere
    Country: Italy
    Company: Printing Dimensions
    Representative: Elwin Sharvill
  • Name: Jefferson Schemmer
    Country: Spain
    Company: Dorl, James J Esq
    Representative: Ioni Bowcher
  • Name: Aika Inouye
    Country: Germany
    Company: Morlong Associates
    Representative: Amy Elsner
  • Name: Jeanfrancois Venere
    Country: Argentina
    Company: Chapman, Ross E Esq
    Representative: Ioni Bowcher
  • Name: Maisha Rulapaugh
    Country: India
    Company: Dorl, James J Esq
    Representative: Bernardo Dominic
  • Name: Jeanfrancois Venere
    Country: Italy
    Company: Truhlar And Truhlar Attys
    Representative: Asiya Javayant
  • Name: Nicolas Iturbide
    Country: India
    Company: Chanay, Jeffrey A Esq
    Representative: Xuxue Feng
  • Name: Kaitlin Ostrosky
    Country: Argentina
    Company: Dorl, James J Esq
    Representative: Xuxue Feng

<div class="card">
    <h:form id="form">
        <p:dataView var="customer" value="#{dtLazyView.lazyModel}" rows="12" paginator="true"
                    rowsPerPageTemplate="6,12,16"
                    paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                    gridIcon="pi pi-th-large" listIcon="pi pi-bars">

            <p:dataViewGridItem>
                <div class="card p-d-flex p-jc-center">
                    <h:panelGrid columns="2" cellpadding="7">
                        <h:outputText value="Name:" styleClass="text-secondary"/>
                        <h:outputText value="#{customer.name}"/>

                        <h:outputText value="Country:" styleClass="text-secondary"/>
                        <p:column>
                            <span class="flag flag-#{customer.country.code}"
                                    style="width: 30px; height: 20px"/>
                            <h:outputText style="vertical-align: middle; margin-left: .5rem"
                                            value="#{customer.country.name}"/>
                        </p:column>

                        <h:outputText value="Company:" styleClass="text-secondary"/>
                        <h:outputText value="#{customer.company}"/>

                        <h:outputText value="Representative:" styleClass="text-secondary"/>
                        <p:column>
                            <p:graphicImage name="images/avatar/#{customer.representative.image}"
                                            library="demo"
                                            width="32" style="vertical-align: middle"/>
                            <h:outputText style="vertical-align: middle; margin-left: .5rem"
                                            value="#{customer.representative.name}"/>
                        </p:column>
                    </h:panelGrid>
                </div>
            </p:dataViewGridItem>

            <p:dataViewListItem>
                <h:panelGrid columns="2" style="width:100%" cellspacing="20">
                    <p:outputPanel>
                        <h:panelGrid columns="2" cellpadding="7">
                            <h:outputText value="Name:" styleClass="text-secondary" />
                            <h:outputText value="#{customer.name}"/>

                            <h:outputText value="Country:" styleClass="text-secondary"/>
                            <p:column>
                                <span class="flag flag-#{customer.country.code}"
                                      style="width: 30px; height: 20px"/>
                                <h:outputText style="vertical-align: middle; margin-left: .5rem"
                                              value="#{customer.country.name}"/>
                            </p:column>

                            <h:outputText value="Company:" styleClass="text-secondary"/>
                            <h:outputText value="#{customer.company}"/>

                            <h:outputText value="Representative:" styleClass="text-secondary"/>
                            <p:column>
                                <p:graphicImage name="images/avatar/#{customer.representative.image}"
                                                library="demo"
                                                width="32" style="vertical-align: middle"/>
                                <h:outputText style="vertical-align: middle; margin-left: .5rem"
                                              value="#{customer.representative.name}"/>
                            </p:column>
                        </h:panelGrid>
                    </p:outputPanel>
                </h:panelGrid>
            </p:dataViewListItem>
        </p:dataView>
    </h:form>
</div>

Session expired

Reloading page

Message:
StackTrace: