DataView displays data in grid or list layout.
<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}">
<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>