Filtering updates the data based on the constraints.
1. Hide filter components initially by adding p-filter-toggleable as styleClass to the datatable.
2. To show/hide the filter components call PF('customersTable4').toggleFilter().
<div class="card">
<h5>Column Filtering</h5>
<h:form>
<p:dataTable var="customer" value="#{dtFilterView.customers1}" widgetVar="customersTable"
emptyMessage="No customers found with given criteria"
filteredValue="#{dtFilterView.filteredCustomers1}"
globalFilterOnly="#{dtFilterView.globalFilterOnly}" partialUpdate="false">
<f:facet name="header">
<div class="flex align-items-center justify-content-between">
<span>List of Customers</span>
<div>
<p:inputText id="globalFilter" onkeyup="PrimeFaces.debounce(() => PF('customersTable').filter())" style="width:10rem"
placeholder="Enter keyword" />
<p:commandButton value="Global Filter Only" update="@form" styleClass="ml-2"
action="#{dtFilterView.toggleGlobalFilter()}"/>
</div>
</div>
</f:facet>
<f:facet name="footer">
<div class="flex align-items-center justify-content-center">
<span>Total Customers: #{dtFilterView.filteredCustomers1 == null ? dtFilterView.customers1.size() : dtFilterView.filteredCustomers1.size()}</span>
</div>
</f:facet>
<p:column headerText="Name" sortBy="#{customer.name}" filterBy="#{customer.name}" filterMatchMode="contains" filterPlaceholder="Filter By Name">
<h:outputText value="#{customer.name}" />
</p:column>
<p:column headerText="Country" sortBy="#{customer.country.name}" filterBy="#{customer.country.name}">
<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>
<p:column field="representative" headerText="Representative" filterMatchMode="exact"
sortBy="#{customer.representative.name}">
<f:facet name="filter">
<p:selectOneMenu onchange="PF('customersTable').filter()" autoWidth="false">
<f:selectItem itemLabel="All" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems value="#{dtFilterView.representatives}" />
</p:selectOneMenu>
</f:facet>
<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>
<p:column field="date" headerText="Join Date" filterMatchMode="between">
<f:facet name="filter">
<p:datePicker selectionMode="range" onchange="PF('customersTable').filter()" />
</f:facet>
</p:column>
<p:column field="status" headerText="Status" filterMatchMode="exact">
<f:facet name="filter">
<p:selectOneMenu onchange="PF('customersTable').filter()" autoWidth="false">
<f:selectItem itemLabel="All" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems value="#{dtFilterView.customerStatus}" />
</p:selectOneMenu>
</f:facet>
<span class="customer-badge status-#{customer.status.name().toLowerCase()}">#{customer.status.toString()}</span>
</p:column>
<p:column field="activity" headerText="Activity" sortBy="#{customer.activity}" filterMatchMode="gt"
converter="jakarta.faces.Integer">
<p:progressBar value="#{customer.activity}" displayOnly="true" style="height: .5rem" />
</p:column>
</p:dataTable>
</h:form>
</div>
<div class="card">
<h5>Default Filter</h5>
<h:form>
<p:dataTable var="customer" value="#{dtFilterView.customers2}" widgetVar="customersTable2"
emptyMessage="No customers found with given criteria"
filteredValue="#{dtFilterView.filteredCustomers2}" filterBy="#{dtFilterView.filterBy}">
<f:facet name="header">
<span>List of Customers</span>
</f:facet>
<p:column headerText="Name" sortBy="#{customer.name}" filterBy="#{customer.name}">
<h:outputText value="#{customer.name}" />
</p:column>
<p:column headerText="Country" sortBy="#{customer.country.name}" filterBy="#{customer.country.name}">
<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>
<p:column field="representative" headerText="Representative" filterMatchMode="exact"
sortBy="#{customer.representative.name}">
<f:facet name="filter">
<p:selectOneMenu onchange="PF('customersTable2').filter()" styleClass="custom-filter" autoWidth="false">
<f:selectItem itemLabel="All" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems value="#{dtFilterView.representatives}" />
</p:selectOneMenu>
</f:facet>
<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>
<p:column field="date" headerText="Join Date" filterMatchMode="between">
<f:facet name="filter">
<p:datePicker selectionMode="range" onchange="PF('customersTable2').filter()" />
</f:facet>
</p:column>
<p:column field="status" headerText="Status" filterMatchMode="exact">
<f:facet name="filter">
<p:selectOneMenu onchange="PF('customersTable2').filter()" autoWidth="false">
<f:selectItem itemLabel="All" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems value="#{dtFilterView.customerStatus}" />
</p:selectOneMenu>
</f:facet>
<span class="customer-badge status-#{customer.status.name().toLowerCase()}">#{customer.status.toString()}</span>
</p:column>
<p:column field="activity" headerText="Activity" sortBy="#{customer.activity}"
converter="jakarta.faces.Integer">
<p:progressBar value="#{customer.activity}" displayOnly="true" style="height: .5rem" />
</p:column>
</p:dataTable>
</h:form>
</div>
<div class="card">
<h5>Global Filter Function</h5>
<h:form>
<p:dataTable var="customer" value="#{dtFilterView.customers3}" widgetVar="customersTable3"
emptyMessage="No customers found with given criteria"
filteredValue="#{dtFilterView.filteredCustomers3}"
globalFilterFunction="#{dtFilterView.globalFilterFunction}">
<f:facet name="header">
<div class="flex justify-content-end">
<p:inputText id="globalFilter" onkeyup="PrimeFaces.debounce(() => PF('customersTable3').filter())" style="width:300px"
placeholder="Search all fields using global function" />
</div>
</f:facet>
<p:column field="name" filterable="false"/>
<p:column headerText="Country" sortBy="#{customer.country.name}" >
<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>
<p:column field="representative" headerText="Representative" filterable="false">
<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>
<p:column field="date" filterable="false"/>
<p:column field="status" filterable="false">
<span class="customer-badge status-#{customer.status.name().toLowerCase()}">#{customer.status.toString()}</span>
</p:column>
<p:column headerText="Activity" sortBy="#{customer.activity}">
<p:progressBar value="#{customer.activity}" displayOnly="true" style="height: .5rem" />
</p:column>
</p:dataTable>
</h:form>
</div>
<div class="card">
<h5>Filter toggling</h5>
<p>1. Hide filter components initially by adding <code>p-filter-toggleable</code> as <em>styleClass</em> to the datatable. <br/>
2. To show/hide the filter components call <code>PF('customersTable4').toggleFilter()</code>.</p>
<h:form id="customersForm4">
<p:dataTable id="customers" var="customer" value="#{dtFilterView.customers1}" widgetVar="customersTable4"
emptyMessage="No customers found with given criteria" stickyHeader="true" stickyTopAt=".layout-topbar"
filteredValue="#{dtFilterView.filteredCustomers1}" styleClass="p-filter-toggleable">
<f:facet name="header">
<div class="flex align-items-center justify-content-between">
<span>List of Customers</span>
<div align="right">
<span>Switch toggle with manual toggleFilter()</span>
<p:toggleSwitch id="manualToggle" styleClass="vertical-align-middle ml-3" onchange="PF('customersTable4').toggleFilter()" onIcon="pi pi-filter" offIcon="pi pi-filter-slash"/>
</div>
</div>
</f:facet>
<p:column headerText="Name" sortBy="#{customer.name}" filterBy="#{customer.name}" filterMatchMode="contains" filterPlaceholder="Filter By Name">
<h:outputText value="#{customer.name}" />
</p:column>
<p:column headerText="Country" sortBy="#{customer.country.name}" filterBy="#{customer.country.name}">
<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>
<p:column field="representative" headerText="Representative" filterMatchMode="exact"
sortBy="#{customer.representative.name}">
<f:facet name="filter">
<p:selectOneMenu onchange="PF('customersTable').filter()" autoWidth="false">
<f:selectItem itemLabel="All" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems value="#{dtFilterView.representatives}" />
</p:selectOneMenu>
</f:facet>
<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>
<p:column field="date" headerText="Join Date" filterMatchMode="between">
<f:facet name="filter">
<p:datePicker selectionMode="range" onchange="PF('customersTable').filter()" />
</f:facet>
</p:column>
<p:column field="status" headerText="Status" filterMatchMode="exact">
<f:facet name="filter">
<p:selectOneMenu onchange="PF('customersTable').filter()" >
<f:selectItem itemLabel="All" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems value="#{dtFilterView.customerStatus}" />
</p:selectOneMenu>
</f:facet>
<span class="customer-badge status-#{customer.status.name().toLowerCase()}">#{customer.status.toString()}</span>
</p:column>
<p:column field="activity" headerText="Activity" sortBy="#{customer.activity}" filterMatchMode="gt"
converter="jakarta.faces.Integer">
<p:progressBar value="#{customer.activity}" displayOnly="true" style="height: .5rem" />
</p:column>
</p:dataTable>
</h:form>
</div>