Input Style

Free Themes

Built-in component themes created by the PrimeFaces Theme Designer.

Saga Saga
Vela Vela
Arya Arya

Legacy Free Themes

Luna Amber Luna Amber
Luna Blue Luna Blue
Luna Green Luna Green
Luna Pink Luna Pink
Nova Nova
Nova Nova Alt
Nova Nova Accent

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.

DataTable Filter

Filtering updates the data based on the constraints.

List of Customers
NameCountryRepresentative
Join Date
Status
Activity
Antonio Caudy FranceAmy Elsner2021-02-22 NEGOTIATION
Costa Dilliard United KingdomAsiya Javayant2021-02-01 PROPOSAL
Jeanfrancois Venere BrazilAmy Elsner2021-02-19 RENEWAL
Faith Gillian ItalyIvan Magalhaes2021-02-24 NEW
Kadeem Flosi FranceOnyama Limba2021-02-10 RENEWAL
Leon Oldroyd GermanyElwin Sharvill2021-01-30 PROPOSAL
Claire Tollner BrazilIoni Bowcher2021-02-27 UNQUALIFIED
Leja Caldarera IndiaIoni Bowcher2021-02-25 QUALIFIED
Smith Glick BrazilAsiya Javayant2021-02-21 QUALIFIED
Munro Ferencz ItalyBernardo Dominic2021-02-09 PROPOSAL

<style type="text/css">
    .ui-filter-column .ui-column-customfilter .custom-filter {
        width: 100%;
        box-sizing: border-box;
    }
</style>


<h:form>

    <div class="card">
        <p:dataTable var="customer" value="#{dtFilterView.customers1}" widgetVar="customersTable"
                     emptyMessage="No customers found with given criteria"
                     filteredValue="#{dtFilterView.filteredCustomers1}"
                     filterBy="#{dtFilterView.filterBy}">

            <f:facet name="header">
                <div class="p-d-flex p-ai-center p-jc-between">
                    <span>List of Customers</span>
                    <p:inputText id="globalFilter" onkeyup="PF('customersTable').filter()" style="width:10rem" placeholder="Enter keyword"/>
                </div>
            </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('customersTable').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="range">
                <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()" styleClass="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 headerText="Activity" sortBy="#{customer.activity}">
                <p:progressBar value="#{customer.activity}" displayOnly="true" style="height: .5rem"/>
            </p:column>

        </p:dataTable>
    </div>
</h:form>