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 Responsive

DataView offers basic responsiveness. You can improve this for e.g. large screen via gridRowStyleClass-attribute. Additional you can use PrimeFlex instead of Grid CSS via flex-attribute or set primefaces.FLEX as context-param.

ui-button
ui-button
Clothing
In Stock
Shoes
Product Description
$64.00
Accessories
Low Stock
Chakra Bracelet
Product Description
$32.00
Clothing
Out of Stock
Grey T-Shirt
Product Description
$48.00
Electronics
In Stock
Green Earbuds
Product Description
$89.00
Electronics
Low Stock
Headphones
Product Description
$175.00
Accessories
In Stock
Bamboo Watch
Product Description
$65.00
Accessories
In Stock
Painted Phone Case
Product Description
$56.00
Clothing
Low Stock
Teal T-Shirt
Product Description
$49.00
Accessories
In Stock
Bamboo Watch
Product Description
$65.00
Accessories
In Stock
Black Watch
Product Description
$72.00
Clothing
In Stock
Mini Speakers
Product Description
$85.00
Clothing
Low Stock
Teal T-Shirt
Product Description
$49.00

<div class="product card">
    <h:form id="form">
        <p:dataView var="product" value="#{dataGridView.products}" rows="12" paginator="true"
                    paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"
                    gridIcon="pi pi-th-large" listIcon="pi pi-bars"
                    layout="grid" gridRowStyleClass="p-lg-6 p-xl-4" flex="true">

            <p:dataViewGridItem>
                <div class="product-grid-item card border-1">
                    <div class="product-grid-item-top">
                        <div>
                            <i class="pi pi-tag product-category-icon"/>
                            <span class="product-category">#{product.category}</span>
                        </div>
                        <span class="product-badge status-#{product.inventoryStatus.name().toLowerCase()}">#{product.inventoryStatus.text}</span>
                    </div>
                    <div class="product-grid-item-content">
                        <p:graphicImage name="images/product/#{product.image}" library="demo"/>
                        <div class="product-name">#{product.name}</div>
                        <div class="product-description">#{product.description}</div>
                        <p:rating readonly="true" value="#{product.rating}"/>
                    </div>
                    <div class="product-grid-item-bottom">
                        <h:outputText value="#{product.price}" styleClass="product-price">
                            <f:convertNumber currencySymbol="$" type="currency"/>
                        </h:outputText>
                        <p:commandButton type="button"
                                            value="Add To Cart"
                                            icon="pi pi-shopping-cart"
                                            disabled="#{product.inventoryStatus == 'OUTOFSTOCK'}">
                        </p:commandButton>
                    </div>
                </div>
            </p:dataViewGridItem>

            <p:dataViewListItem>
                <div class="product-list-item">
                    <p:graphicImage name="demo/images/product/#{product.image}"/>
                    <div class="product-list-detail">
                        <div class="product-name">#{product.name}</div>
                        <div class="product-description">#{product.description}</div>
                        <p:rating readonly="true" value="#{product.rating}"/>
                        <i class="pi pi-tag product-category-icon"/><span
                            class="product-category">#{product.category}</span>
                    </div>
                    <div class="product-list-action">
                        <h:outputText value="#{product.price}" styleClass="product-price">
                            <f:convertNumber currencySymbol="$" type="currency"/>
                        </h:outputText>
                        <p:commandButton type="button"
                                            value="Add To Cart"
                                            icon="pi pi-shopping-cart"
                                            disabled="#{product.inventoryStatus == 'OUTOFSTOCK'}">
                        </p:commandButton>
                        <span class="product-badge status-#{product.inventoryStatus.name().toLowerCase()}">#{product.inventoryStatus.text}</span>
                    </div>
                </div>
            </p:dataViewListItem>
        </p:dataView>

    </h:form>
</div>