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: Leon Oldroyd
    Country: France
    Company: Benton, John B Jr
    Representative: Onyama Limba
  • Name: Aditya Kusko
    Country: Japan
    Company: King, Christopher A Esq
    Representative: Ivan Magalhaes
  • Name: Claire Tollner
    Country: Brazil
    Company: Buckley Miller Wright
    Representative: Anna Fali
  • Name: Aruna Figeroa
    Country: Brazil
    Company: Chemel, James L Cpa
    Representative: Amy Elsner
  • Name: Jones Vocelka
    Country: United Kingdom
    Company: Chemel, James L Cpa
    Representative: Elwin Sharvill
  • Name: Sinclair Waycott
    Country: Russia
    Company: Benton, John B Jr
    Representative: Ivan Magalhaes
  • Name: Smith Glick
    Country: Argentina
    Company: Rousseaux, Michael Esq
    Representative: Onyama Limba
  • Name: Jennifer Amigon
    Country: Russia
    Company: Benton, John B Jr
    Representative: Elwin Sharvill
  • Name: Deepesh Chui
    Country: Japan
    Company: Morlong Associates
    Representative: Asiya Javayant
  • Name: Rodrigues Campain
    Country: Russia
    Company: Chemel, James L Cpa
    Representative: Elwin Sharvill
  • Name: David Darakjy
    Country: Australia
    Company: Rousseaux, Michael Esq
    Representative: Ioni Bowcher
  • Name: Wickens Nestle
    Country: Spain
    Company: Commercial Press
    Representative: Asiya Javayant

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