	Language
	English
	English
	English
	French
	German
	German
	German
	Italian
	Korean
	Spanish
	Catalan
	Dutch
	Portuguese
	Portuguese
	Arabic
	Arabic
	Bulgarian
	Czech
	Greek
	Persian
	Finnish
	Danish
	Hindi
	Indonesian
	Croatian
	Japanese
	Hungarian
	Hebrew
	Georgian
	Central Kurdish
	Khmer
	Kyrgyz
	Kazakh
	Lithuanian
	Latvian
	Malay
	Norwegian
	Polish
	Romanian
	Russian
	Slovak
	Slovenian
	Serbian
	Serbian
	Swedish
	Thai
	Turkish
	Ukrainian
	Vietnamese
	Chinese
	Chinese

DataTable Filter

Filtering updates the data based on the constraints.

Column Filtering

List of Customers

Name	Country	Representative	Join Date	Status
Leon Z Stenseth	Argentina	Onyama Limba	2024-06-20	PROPOSAL
Murillo F Foller	Italy	Bernardo Dominic	2024-05-28	NEGOTIATION
Maria B Dilliard	Russia	Asiya Javayant	2024-06-04	RENEWAL
Darci S Caudy	India	Bernardo Dominic	2024-06-15	NEW
Kadeem U Rim	India	Ioni Bowcher	2024-06-11	NEGOTIATION
Greenwood P Tollner	India	Stephen Shaw	2024-06-05	UNQUALIFIED
James E Doe	Japan	Amy Elsner	2024-05-24	NEW
Mayumi Z Gillian	Australia	Ivan Magalhaes	2024-05-31	QUALIFIED
Emily A Whobrey	India	Bernardo Dominic	2024-05-31	RENEWAL
Cody A Stenseth	Japan	Asiya Javayant	2024-06-02	NEGOTIATION

Default Filter

List of Customers

Name	Country	Representative	Join Date	Status
Octavia R Amigon	Brazil	Asiya Javayant	2024-06-20	NEW
Jefferson Q Maclead	Canada	Amy Elsner	2024-05-30	NEW
Johnson Y Briddick	Italy	Bernardo Dominic	2024-06-11	NEW
Munro K Caldarera	Argentina	Anna Fali	2024-06-06	NEW
Claire V Flosi	Australia	Amy Elsner	2024-06-05	NEW
Faith O Campain	Brazil	Stephen Shaw	2024-06-13	NEW
Mujtaba Y Paprocki	France	Bernardo Dominic	2024-06-02	NEW
Arvin M Tollner	Japan	Ioni Bowcher	2024-05-31	NEW
Darci Y Campain	Argentina	Xuxue Feng	2024-06-19	NEW
Johnson G Rulapaugh	Argentina	Onyama Limba	2024-06-04	NEW
Claire C Figeroa	United Kingdom	Xuxue Feng	2024-06-03	NEW
Jeanfrancois H Glick	Germany	Ivan Magalhaes	2024-05-28	NEW

Global Filter Function

Name	Country	Representative	Date	Status
Aika J Shinko	Australia	Onyama Limba	2024-05-27	NEGOTIATION
Tony H Oldroyd	Argentina	Anna Fali	2024-06-16	NEW
Arvin Q Poquette	Germany	Elwin Sharvill	2024-05-29	QUALIFIED
Emily Z Glick	France	Anna Fali	2024-05-24	PROPOSAL
Stacey F Nicka	Japan	Anna Fali	2024-06-13	NEW
Jennifer C Maclead	United Kingdom	Elwin Sharvill	2024-05-28	NEW
Izzy X Rim	Russia	Onyama Limba	2024-06-11	NEGOTIATION
Tony F Inouye	France	Bernardo Dominic	2024-06-17	UNQUALIFIED
Rodrigues C Tollner	India	Bernardo Dominic	2024-06-03	QUALIFIED
Izzy U Malet	Australia	Asiya Javayant	2024-05-27	PROPOSAL


<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)];
    }
}

Locale

Input Style

Themes

PrimeOne

Bootstrap

Material Design

Material Design Compact

DataTable Filter

Column Filtering

Default Filter

Global Filter Function

Reloading page