This samples demonstrates a CRUD implementation using various PrimeFaces components.
<div class="card crud-demo">
<h:form id="form">
<p:growl id="messages" showDetail="true" />
<p:toolbar>
<p:toolbarGroup>
<p:commandButton value="New" icon="pi pi-plus" actionListener="#{crudView.openNew}"
update=":dialogs:manage-product-content" oncomplete="PF('manageProductDialog').show()"
styleClass="p-button-success" style="margin-right: .5rem">
<p:resetInput target=":dialogs:manage-product-content" />
</p:commandButton>
<p:commandButton id="delete-products-button" value="#{crudView.deleteButtonMessage}"
icon="pi pi-trash" actionListener="#{crudView.deleteSelectedProducts}"
styleClass="p-button-danger" disabled="#{!crudView.hasSelectedProducts()}" update="@this">
<p:confirm header="Confirmation" message="Delete the selected products?"
icon="pi pi-exclamation-triangle" />
</p:commandButton>
</p:toolbarGroup>
<p:toolbarGroup align="right">
<p:fileUpload mode="simple" skinSimple="true" label="Import" />
<p:commandButton value="Export" icon="pi pi-upload" styleClass="p-button-help" ajax="false">
<p:dataExporter type="pdf" target="dt-products" fileName="products" />
</p:commandButton>
</p:toolbarGroup>
</p:toolbar>
<p:dataTable id="dt-products" widgetVar="dtProducts" var="product" value="#{crudView.products}"
reflow="true" styleClass="products-table" selectionMode="multiple" selection="#{crudView.selectedProducts}"
rowKey="#{product.code}" paginator="true" rows="10" selectionRowMode="add" paginatorPosition="bottom">
<f:facet name="header">
<div class="products-table-header">
<span style="font-weight: bold">PRODUCTS</span>
<span class="filter-container p-input-icon-left"> <i class="pi pi-search"></i>
<p:inputText id="globalFilter" onkeyup="PrimeFaces.debounce(() => PF('dtProducts').filter())" placeholder="Search" />
</span>
</div>
</f:facet>
<p:ajax event="rowSelect" update=":form:delete-products-button" />
<p:ajax event="rowUnselect" update=":form:delete-products-button" />
<p:ajax event="rowSelectCheckbox" update=":form:delete-products-button" />
<p:ajax event="rowUnselectCheckbox" update=":form:delete-products-button" />
<p:ajax event="toggleSelect" update=":form:delete-products-button" />
<p:column selectionBox="true" exportable="false"></p:column>
<p:column headerText="Code" sortBy="#{product.code}" filterBy="#{product.code}">
<h:outputText value="#{product.code}" />
</p:column>
<p:column headerText="Name" sortBy="#{product.name}" filterBy="#{product.name}">
<h:outputText value="#{product.name}" />
</p:column>
<p:column headerText="Image" exportable="false">
<p:graphicImage name="images/product/#{product.image}" library="demo" styleClass="product-image" />
</p:column>
<p:column headerText="Price" sortBy="#{product.price}">
<h:outputText value="#{product.price}" style="font-weight: 700">
<f:convertNumber currencySymbol="$" type="currency" />
</h:outputText>
</p:column>
<p:column headerText="Category" sortBy="#{product.category}" filterBy="#{product.category}">
<h:outputText value="#{product.category}" />
</p:column>
<p:column headerText="Reviews" sortBy="#{product.rating}">
<p:rating value="#{product.rating}" readonly="true" />
</p:column>
<p:column headerText="Status" sortBy="#{product.inventoryStatus}"
filterBy="#{product.inventoryStatus}">
<h:outputText styleClass="product-badge status-#{product.inventoryStatus.name().toLowerCase()}"
value="#{product.inventoryStatus.text}" />
</p:column>
<p:column exportable="false" ariaHeaderText="Actions">
<p:commandButton icon="pi pi-pencil" update=":dialogs:manage-product-content"
oncomplete="PF('manageProductDialog').show()"
styleClass="edit-button rounded-button p-button-success" process="@this">
<f:setPropertyActionListener value="#{product}" target="#{crudView.selectedProduct}" />
<p:resetInput target=":dialogs:manage-product-content" />
</p:commandButton>
<p:commandButton class="p-button-warning rounded-button" icon="pi pi-trash"
process="@this"
oncomplete="PF('deleteProductDialog').show()">
<f:setPropertyActionListener value="#{product}" target="#{crudView.selectedProduct}" />
</p:commandButton>
</p:column>
</p:dataTable>
</h:form>
<h:form id="dialogs">
<p:dialog header="Product Details" showEffect="fade" modal="true" widgetVar="manageProductDialog"
responsive="true">
<p:outputPanel id="manage-product-content" class="p-fluid">
<p:outputPanel rendered="#{not empty crudView.selectedProduct}">
<p:graphicImage name="images/product/#{crudView.selectedProduct.image}" library="demo"
styleClass="product-image" rendered="#{not empty crudView.selectedProduct.image}" />
<div class="field">
<p:outputLabel for="name">Name</p:outputLabel>
<p:inputText id="name" value="#{crudView.selectedProduct.name}" required="true" />
</div>
<div class="field">
<p:outputLabel for="description">Description</p:outputLabel>
<p:inputTextarea id="description" value="#{crudView.selectedProduct.description}" />
</div>
<div class="field">
<p:outputLabel for="category">Category</p:outputLabel>
<p:selectOneRadio id="category" value="#{crudView.selectedProduct.category}"
layout="responsive" columns="2">
<f:selectItem itemLabel="Accessories" itemValue="Accessories" />
<f:selectItem itemLabel="Clothing" itemValue="Clothing" />
<f:selectItem itemLabel="Electronics" itemValue="Electronics" />
<f:selectItem itemLabel="Fitness" itemValue="Fitness" />
</p:selectOneRadio>
</div>
<div class="formgrid grid">
<div class="field col">
<p:outputLabel for="price">Price</p:outputLabel>
<p:inputNumber id="price" value="#{crudView.selectedProduct.price}" symbol=" USD"
symbolPosition="s" decimalSeparator="." thousandSeparator="," />
</div>
<div class="field col">
<p:outputLabel for="quantity">Quantity</p:outputLabel>
<p:spinner id="quantity" min="0" value="#{crudView.selectedProduct.quantity}" />
</div>
</div>
</p:outputPanel>
</p:outputPanel>
<f:facet name="footer">
<p:commandButton value="Save" icon="pi pi-check" actionListener="#{crudView.saveProduct}"
update="manage-product-content" process="manage-product-content @this" />
<p:commandButton value="Cancel" icon="pi pi-times" onclick="PF('manageProductDialog').hide()"
class="p-button-secondary" type="button" />
</f:facet>
</p:dialog>
<p:confirmDialog widgetVar="deleteProductDialog" showEffect="fade" width="300"
message="Delete the product?" header="Confirm" severity="warn">
<p:commandButton value="Yes" icon="pi pi-check" actionListener="#{crudView.deleteProduct}"
process="@this" update=":form:delete-products-button"
oncomplete="PF('deleteProductDialog').hide()" />
<p:commandButton value="No" type="button" styleClass="p-button-secondary" icon="pi pi-times"
onclick="PF('deleteProductDialog').hide()" />
</p:confirmDialog>
<p:confirmDialog global="true" showEffect="fade" width="300">
<p:commandButton value="Yes" type="button" styleClass="p-confirmdialog-yes" icon="pi pi-check" />
<p:commandButton value="No" type="button" styleClass="p-confirmdialog-no p-button-secondary"
icon="pi pi-times" />
</p:confirmDialog>
</h:form>
</div>