Locale

Change the locale of the datepicker, schedule and client side validation messages.

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

Input Style

Themes

PrimeOne
Saga Saga
Vela Vela
Arya Arya
Bootstrap
bootstrap4-blue-light Bootstrap Blue
bootstrap4-purple-light Bootstrap Purple
bootstrap4-blue-dark Bootstrap Blue
bootstrap4-purple-dark Bootstrap Purple
Material Design
material-indigo-light Indigo
material-deeppurple-light' Deep Purple
material-indigo-dark Indigo
material-deeppurple-dark' Deep Purple
Material Design Compact
material-indigo-light Indigo
material-deeppurple-light' Deep Purple
material-indigo-dark Indigo
material-deeppurple-dark' Deep Purple

DataTable Filter

Filtering updates the data based on the constraints.

Column Filtering
List of Customers
NameCountryRepresentative
Join Date
Status
Activity
Faith B Campain CanadaOnyama Limba2026-03-26 UNQUALIFIED
Greenwood R Butt GermanyAnna Fali2026-03-25 PROPOSAL
Jefferson F Gillian ArgentinaElwin Sharvill2026-02-27 NEGOTIATION
Julie E Iturbide United KingdomAmy Elsner2026-02-25 QUALIFIED
Aditya N Whobrey AustraliaElwin Sharvill2026-02-27 QUALIFIED
Misaki B Nicka AustraliaStephen Shaw2026-03-17 NEGOTIATION
Smith J Caldarera IndiaStephen Shaw2026-03-06 UNQUALIFIED
Misaki G Caldarera BrazilElwin Sharvill2026-02-27 PROPOSAL
Ricardo K Dilliard SpainAsiya Javayant2026-03-17 PROPOSAL
Alejandro T Briddick United KingdomIvan Magalhaes2026-03-16 NEW
Default Filter
List of Customers
NameCountryRepresentative
Join Date
Status
Activity
Misaki D Rulapaugh CanadaIvan Magalhaes2026-03-01 NEW
Wickens A Caldarera AustraliaElwin Sharvill2026-03-15 NEW
Cody N Malet ItalyAsiya Javayant2026-03-10 NEW
David R Dilliard ItalyXuxue Feng2026-03-17 NEW
Isabel Z Briddick JapanOnyama Limba2026-03-04 NEW
Antonio F Oldroyd FranceBernardo Dominic2026-03-23 NEW
Global Filter Function
NameCountryRepresentativeDateStatusActivity
David S Oldroyd AustraliaAmy Elsner2026-03-06 PROPOSAL
Faith I Chui SpainElwin Sharvill2026-03-20 NEGOTIATION
Ivar T Garufi BrazilElwin Sharvill2026-03-16 RENEWAL
Costa C Doe AustraliaStephen Shaw2026-02-27 PROPOSAL
Chavez F Ruta FranceAsiya Javayant2026-03-12 UNQUALIFIED
Clifford N Perin CanadaAsiya Javayant2026-03-15 RENEWAL
Darci Z Sergi AustraliaAmy Elsner2026-02-27 RENEWAL
Antonio U Sergi GermanyElwin Sharvill2026-03-15 NEGOTIATION
Claire H Waycott IndiaIvan Magalhaes2026-03-08 NEGOTIATION
Claire Y Morasca CanadaStephen Shaw2026-03-25 RENEWAL

<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>

You are using an LTS version of PrimeFaces with an invalid license, you may either switch back to a non-LTS version or purchase a license at PrimeStore.