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.

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: Alejandro Perin
    Country: Australia
    Company: Feltz Printing Service
    Representative: Xuxue Feng
  • Name: Jefferson Schemmer
    Country: Spain
    Company: Commercial Press
    Representative: Ioni Bowcher
  • Name: Isabel Bowley
    Country: Germany
    Company: Chanay, Jeffrey A Esq
    Representative: Xuxue Feng
  • Name: Salvatore Stockham
    Country: Spain
    Company: Feltz Printing Service
    Representative: Asiya Javayant
  • Name: James Butt
    Country: United Kingdom
    Company: Rousseaux, Michael Esq
    Representative: Anna Fali
  • Name: James Butt
    Country: Russia
    Company: Rousseaux, Michael Esq
    Representative: Xuxue Feng
  • Name: Costa Dilliard
    Country: United Kingdom
    Company: Truhlar And Truhlar Attys
    Representative: Onyama Limba
  • Name: Costa Dilliard
    Country: Brazil
    Company: Rangoni Of Florence
    Representative: Amy Elsner
  • Name: Alejandro Perin
    Country: Italy
    Company: Feltz Printing Service
    Representative: Onyama Limba
  • Name: Ivar Paprocki
    Country: United Kingdom
    Company: Printing Dimensions
    Representative: Ivan Magalhaes
  • Name: Aika Inouye
    Country: Australia
    Company: Feltz Printing Service
    Representative: Ioni Bowcher
  • Name: Tony Foller
    Country: Japan
    Company: Rousseaux, Michael 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>