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
Aruna P Campain United KingdomStephen Shaw2026-08-14 QUALIFIED
Julie F Glick BrazilXuxue Feng2026-07-30 RENEWAL
Ivar A Shinko JapanXuxue Feng2026-08-09 QUALIFIED
Salvatore Y Bowley ItalyAnna Fali2026-08-05 NEW
Alejandro P Briddick RussiaAmy Elsner2026-08-02 RENEWAL
Sinclair D Whobrey SpainBernardo Dominic2026-08-05 PROPOSAL
Leon Z Kolmetz AustraliaIvan Magalhaes2026-08-06 PROPOSAL
Juan O Dilliard ArgentinaXuxue Feng2026-08-11 RENEWAL
Costa Y Flosi AustraliaOnyama Limba2026-07-31 RENEWAL
Clifford W Oldroyd AustraliaElwin Sharvill2026-08-15 RENEWAL
Default Filter
List of Customers
NameCountryRepresentative
Join Date
Status
Activity
Mujtaba W Inouye FranceOnyama Limba2026-08-10 NEW
Silvio D Bolognia BrazilIoni Bowcher2026-08-09 NEW
Costa R Wieser AustraliaBernardo Dominic2026-08-02 NEW
Jeanfrancois X Wieser CanadaXuxue Feng2026-08-03 NEW
Clifford M Amigon IndiaAmy Elsner2026-07-29 NEW
Silvio Q Sergi ItalyOnyama Limba2026-08-13 NEW
Global Filter Function
NameCountryRepresentativeDateStatusActivity
Kadeem D Morasca CanadaIoni Bowcher2026-07-26 QUALIFIED
Wickens X Rim ItalyIoni Bowcher2026-08-04 PROPOSAL
Izzy Z Albares IndiaAmy Elsner2026-08-15 UNQUALIFIED
Munro A Briddick SpainAmy Elsner2026-07-31 UNQUALIFIED
Munro U Gaucho United KingdomIoni Bowcher2026-07-25 QUALIFIED
Ashley Y Rim GermanyOnyama Limba2026-08-13 RENEWAL
Adams Z Foller BrazilXuxue Feng2026-08-03 QUALIFIED
Faith T Venere ArgentinaXuxue Feng2026-08-04 QUALIFIED
Nicolas M Gillian FranceIoni Bowcher2026-08-09 PROPOSAL
Chavez P Garufi RussiaOnyama Limba2026-08-04 NEGOTIATION

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