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.

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: Aruna Figeroa
    Country: Brazil
    Company: Rangoni Of Florence
    Representative: Anna Fali
  • Name: James Butt
    Country: United Kingdom
    Company: Chapman, Ross E Esq
    Representative: Onyama Limba
  • Name: Antonio Caudy
    Country: Germany
    Company: Rousseaux, Michael Esq
    Representative: Stephen Shaw
  • Name: James Butt
    Country: Spain
    Company: Rousseaux, Michael Esq
    Representative: Bernardo Dominic
  • Name: Kaitlin Ostrosky
    Country: Brazil
    Company: Rousseaux, Michael Esq
    Representative: Ioni Bowcher
  • Name: Julie Stenseth
    Country: Germany
    Company: Benton, John B Jr
    Representative: Ioni Bowcher
  • Name: Chavez Briddick
    Country: Australia
    Company: Buckley Miller Wright
    Representative: Ivan Magalhaes
  • Name: Ivar Paprocki
    Country: Spain
    Company: King, Christopher A Esq
    Representative: Bernardo Dominic
  • Name: Leon Oldroyd
    Country: Argentina
    Company: Commercial Press
    Representative: Bernardo Dominic
  • Name: David Darakjy
    Country: Italy
    Company: Feltz Printing Service
    Representative: Elwin Sharvill
  • Name: Faith Gillian
    Country: Canada
    Company: Buckley Miller Wright
    Representative: Ioni Bowcher
  • Name: Jennifer Amigon
    Country: Japan
    Company: Printing Dimensions
    Representative: Stephen Shaw

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