Input Style

Free Themes

Built-in component themes created by the PrimeFaces Theme Designer.

Saga Saga
Vela Vela
Arya Arya

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 Basic

DataView displays data in grid or list layout.

ui-button
ui-button
  • Pink Purse
    Product Description
    Accessories
    $110.00 Out of Stock
  • Grey T-Shirt
    Product Description
    Clothing
    $48.00 Out of Stock
  • Green T-Shirt
    Product Description
    Clothing
    $49.00 In Stock
  • Yoga Set
    Product Description
    Fitness
    $20.00 In Stock
  • Lime Band
    Product Description
    Fitness
    $79.00 In Stock
  • Pink Purse
    Product Description
    Accessories
    $110.00 Out of Stock
  • Green Earbuds
    Product Description
    Electronics
    $89.00 In Stock
  • Brown Purse
    Product Description
    Accessories
    $120.00 Out of Stock
  • Gold Phone Case
    Product Description
    Accessories
    $24.00 Out of Stock
  • Painted Phone Case
    Product Description
    Accessories
    $56.00 In Stock
  • Bamboo Watch
    Product Description
    Accessories
    $65.00 In Stock
  • Teal T-Shirt
    Product Description
    Clothing
    $49.00 Low Stock

<div class="card product">
    <h:form id="form">
        <p:dataView var="product" value="#{dataGridView.products}" 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="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>