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: Ashley Doe
    Country: Argentina
    Company: King, Christopher A Esq
    Representative: Ioni Bowcher
  • Name: Aika Inouye
    Country: Brazil
    Company: Feltz Printing Service
    Representative: Ioni Bowcher
  • Name: Salvatore Stockham
    Country: Brazil
    Company: Chemel, James L Cpa
    Representative: Onyama Limba
  • Name: Alejandro Perin
    Country: Spain
    Company: Chemel, James L Cpa
    Representative: Ivan Magalhaes
  • Name: Johnson Sergi
    Country: Argentina
    Company: Commercial Press
    Representative: Amy Elsner
  • Name: Faith Gillian
    Country: Spain
    Company: Morlong Associates
    Representative: Amy Elsner
  • Name: Nicolas Iturbide
    Country: Brazil
    Company: Chanay, Jeffrey A Esq
    Representative: Anna Fali
  • Name: Alejandro Perin
    Country: Argentina
    Company: Morlong Associates
    Representative: Stephen Shaw
  • Name: Aika Inouye
    Country: United Kingdom
    Company: Chanay, Jeffrey A Esq
    Representative: Xuxue Feng
  • Name: Murillo Malet
    Country: Argentina
    Company: Morlong Associates
    Representative: Ioni Bowcher
  • Name: Claire Tollner
    Country: United Kingdom
    Company: Feiner Bros
    Representative: Anna Fali
  • Name: Emily Whobrey
    Country: Japan
    Company: Truhlar And Truhlar Attys
    Representative: Ioni Bowcher

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