General
Support
Resources
Theming
Accessiblity
PrimeBlocks
PrimeFlex
PrimeIcons
UI KIT
Ajax Framework
Introduction
Process
PartialSubmit
Selector
Search
Validation
RemoteCommand
Observer
Poll
Fragment
Status
Lifecycle
Dropdown
Form
AutoComplete
CascadeSelect
Chips
Inplace
InputGroup
InputMask
InputNumber
InputText
InputTextArea
KeyFilter
Keyboard
Knob
MultiSelectListBox
Password
Rating
SelectBooleanButton
SelectBooleanCheckbox
SelectOneButton
SelectOneRadio
SelectCheckboxMenu
SelectOneMenu
SelectOneListbox
SelectManyButton
SelectManyMenu
SelectManyCheckbox
Signature
Slider
Spinner
TextEditor
ToggleSwitch
TriStateCheckbox
Button
Data
Panel
Accordion
Card
Dashboard
Divider
Fieldset
NotificationBar
OutputPanel
Panel
PanelGrid
Splitter
ScrollPanel
TabView
Toolbar
Wizard
Overlay
Menu
Chart
BarNew
BubbleNew
DoughnutNew
LineNew
PieNew
ScatterNew
PolarAreaNew
RadarNew
CustomNew
FacetNew
ExportNew
Charts
BarDeprecated
BubbleDeprecated
DonutDeprecated
LineDeprecated
PieDeprecated
ScatterDeprecated
PolarAreaDeprecated
RadarDeprecated
MixedDeprecated
InteractiveDeprecated
ExportDeprecated
Messages
Multimedia
File
DragDrop
Client Side Validation
Dialog Framework
Misc
DataTable Filter
Filtering updates the data based on the constraints.
Column Filtering
Default Filter
Global Filter Function
<style>
.ui-filter-column .ui-column-customfilter .custom-filter {
width: 100%;
box-sizing: border-box;
}
</style>
<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}">
<f:facet name="header">
<div class="flex align-items-center justify-content-between">
<span>List of Customers</span>
<div>
<p:inputText id="globalFilter" onkeyup="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>
<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()" styleClass="ui-custom-filter">
<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()" converter="javax.faces.DateTime" />
</f:facet>
</p:column>
<p:column field="status" headerText="Status" filterMatchMode="exact">
<f:facet name="filter">
<p:selectOneMenu onchange="PF('customersTable').filter()" styleClass="ui-custom-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="javax.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">
<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()" styleClass="ui-custom-filter"/>
</f:facet>
</p:column>
<p:column field="status" headerText="Status" filterMatchMode="exact">
<f:facet name="filter">
<p:selectOneMenu onchange="PF('customersTable2').filter()" styleClass="ui-custom-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}"
converter="javax.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="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>
@Named("dtFilterView")
@ViewScoped
public class FilterView implements Serializable {
@Inject
private CustomerService service;
private List<Customer> customers1;
private List<Customer> customers2;
private List<Customer> customers3;
private List<Customer> filteredCustomers1;
private List<Customer> filteredCustomers2;
private List<Customer> filteredCustomers3;
private List<FilterMeta> filterBy;
private boolean globalFilterOnly;
@PostConstruct
public void init() {
globalFilterOnly = false;
customers1 = service.getCustomers(10);
customers2 = service.getCustomers(50);
customers3 = service.getCustomers(10);
filterBy = new ArrayList<>();
filterBy.add(FilterMeta.builder()
.field("status")
.filterValue(CustomerStatus.NEW)
.matchMode(MatchMode.EQUALS)
.build());
filterBy.add(FilterMeta.builder()
.field("date")
.filterValue(new ArrayList<>(Arrays.asList(LocalDate.now().minusDays(28), LocalDate.now().plusDays(28))))
.matchMode(MatchMode.BETWEEN)
.build());
}
public boolean globalFilterFunction(Object value, Object filter, Locale locale) {
String filterText = (filter == null) ? null : filter.toString().trim().toLowerCase();
if (LangUtils.isBlank(filterText)) {
return true;
}
int filterInt = getInteger(filterText);
Customer customer = (Customer) value;
return customer.getName().toLowerCase().contains(filterText)
|| customer.getCountry().getName().toLowerCase().contains(filterText)
|| customer.getRepresentative().getName().toLowerCase().contains(filterText)
|| customer.getDate().toString().toLowerCase().contains(filterText)
|| customer.getStatus().name().toLowerCase().contains(filterText)
|| customer.getActivity() < filterInt;
}
public void toggleGlobalFilter() {
setGlobalFilterOnly(!isGlobalFilterOnly());
}
private int getInteger(String string) {
try {
return Integer.parseInt(string);
}
catch (NumberFormatException ex) {
return 0;
}
}
public List<Representative> getRepresentatives() {
return service.getRepresentatives();
}
public CustomerStatus[] getCustomerStatus() {
return service.getCustomerStatus();
}
public List<Customer> getCustomers1() {
return customers1;
}
public List<Customer> getCustomers2() {
return customers2;
}
public List<Customer> getCustomers3() {
return customers3;
}
public List<Customer> getFilteredCustomers1() {
return filteredCustomers1;
}
public void setFilteredCustomers1(List<Customer> filteredCustomers1) {
this.filteredCustomers1 = filteredCustomers1;
}
public List<Customer> getFilteredCustomers2() {
return filteredCustomers2;
}
public void setFilteredCustomers2(List<Customer> filteredCustomers2) {
this.filteredCustomers2 = filteredCustomers2;
}
public List<Customer> getFilteredCustomers3() {
return filteredCustomers3;
}
public void setFilteredCustomers3(List<Customer> filteredCustomers3) {
this.filteredCustomers3 = filteredCustomers3;
}
public void setService(CustomerService service) {
this.service = service;
}
public List<FilterMeta> getFilterBy() {
return filterBy;
}
public boolean isGlobalFilterOnly() {
return globalFilterOnly;
}
public void setGlobalFilterOnly(boolean globalFilterOnly) {
this.globalFilterOnly = globalFilterOnly;
}
}
@Named
@ApplicationScoped
public class CustomerService {
private Random random = new SecureRandom();
private Country[] countries;
private Representative[] representatives;
private String[] firstNames;
private String[] lastNames;
private String[] companies;
@PostConstruct
public void init() {
countries = new Country[]{
new Country(0, "Argentina", "ar"),
new Country(1, "Australia", "au"),
new Country(2, "Brazil", "br"),
new Country(3, "Canada", "ca"),
new Country(4, "Germany", "de"),
new Country(5, "France", "fr"),
new Country(6, "India", "in"),
new Country(7, "Italy", "it"),
new Country(8, "Japan", "jp"),
new Country(9, "Russia", "ru"),
new Country(10, "Spain", "es"),
new Country(11, "United Kingdom", "gb")};
companies = new String[]{"Benton, John B Jr", "Chanay, Jeffrey A Esq", "Chemel, James L Cpa", "Feltz Printing Service",
"Printing Dimensions", "Chapman, Ross E Esq", "Morlong Associates", "Commercial Press", "Truhlar And Truhlar Attys",
"King, Christopher A Esq", "Dorl, James J Esq", "Rangoni Of Florence", "Feiner Bros", "Buckley Miller Wright",
"Rousseaux, Michael Esq"};
representatives = new Representative[]{
new Representative("Amy Elsner", "amyelsner.png"),
new Representative("Anna Fali", "annafali.png"),
new Representative("Asiya Javayant", "asiyajavayant.png"),
new Representative("Bernardo Dominic", "bernardodominic.png"),
new Representative("Elwin Sharvill", "elwinsharvill.png"),
new Representative("Ioni Bowcher", "ionibowcher.png"),
new Representative("Ivan Magalhaes", "ivanmagalhaes.png"),
new Representative("Onyama Limba", "onyamalimba.png"),
new Representative("Stephen Shaw", "stephenshaw.png"),
new Representative("Xuxue Feng", "xuxuefeng.png")};
firstNames = new String[]{"James", "David", "Jeanfrancois", "Ivar", "Tony",
"Adams", "Claire", "Costa", "Juan", "Maria", "Jennifer",
"Stacey", "Leja", "Morrow", "Arvin", "Darci", "Izzy",
"Ricardo", "Clifford", "Emily", "Kadeem", "Mujtaba", "Aika",
"Mayumi", "Misaki", "Silvio", "Nicolas", "Antonio",
"Deepesh", "Aditya", "Aruna", "Jones", "Julie", "Smith",
"Johnson", "Francesco", "Salvatore", "Kaitlin", "Faith",
"Maisha", "Jefferson", "Leon", "Rodrigues", "Alejandro",
"Munro", "Cody", "Chavez", "Sinclair", "Isabel", "Octavia",
"Murillo", "Greenwood", "Wickens", "Ashley"};
lastNames = new String[]{"Butt", "Darakjy", "Venere", "Paprocki", "Foller",
"Morasca", "Tollner", "Dilliard", "Wieser", "Marrier", "Amigon",
"Maclead", "Caldarera", "Ruta", "Albares", "Poquette", "Garufi",
"Gaucho", "Rim", "Whobrey", "Flosi", "Nicka", "Inouye",
"Kolmetz", "Royster", "Slusarski", "Iturbide", "Caudy",
"Chui", "Kusko", "Figeroa", "Vocelka", "Stenseth", "Glick",
"Sergi", "Shinko", "Stockham", "Ostrosky", "Gillian",
"Rulapaugh", "Schemmer", "Oldroyd", "Campain", "Perin",
"Ferencz", "Saylors", "Briddick", "Waycott", "Bowley", "Malet",
"Malet", "Bolognia", "Nestle", "Doe"};
}
public List<Customer> getCustomers(int number) {
List<Customer> customers = new ArrayList<>();
for (int i = 0; i < number; i++) {
customers.add(
new Customer(i + 1000, getName(), getCompany(), getCountry(), getDate(),
CustomerStatus.random(), getActivity(), getRepresentative()));
}
return customers;
}
public List<Country> getCountries() {
return Arrays.asList(countries);
}
public CustomerStatus[] getCustomerStatus() {
return CustomerStatus.values();
}
public List<Representative> getRepresentatives() {
return Arrays.asList(representatives);
}
private String getName() {
return firstNames[random.nextInt(firstNames.length)] + Constants.SPACE
+ (char) (random.nextInt(26) + 'A') + Constants.SPACE
+ lastNames[random.nextInt(lastNames.length)];
}
private Country getCountry() {
return countries[random.nextInt(countries.length)];
}
private String getCompany() {
return companies[random.nextInt(companies.length)];
}
private LocalDate getDate() {
LocalDate now = LocalDate.now();
long randomDay = ThreadLocalRandom.current().nextLong(now.minusDays(30).toEpochDay(), now.toEpochDay());
return LocalDate.ofEpochDay(randomDay);
}
private int getActivity() {
return random.nextInt(100);
}
private Representative getRepresentative() {
return representatives[random.nextInt(representatives.length)];
}
}
PrimeFaces v14.0.0 by
PrimeTek