November Deals: Limited Coupons Available! 🎁 Claim Your Coupon

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
Bangla
Bosnian
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
Uzbek
Vietnamese
Chinese
Chinese

Input Style

Themes

PrimeOne
Saga Blue Saga Blue
Vela Blue Vela Blue
Arya Blue Arya Blue
Bootstrap
Bootstrap Blue Light Bootstrap Blue Light
Bootstrap Purple Light Bootstrap Purple Light
Bootstrap Blue Dark Bootstrap Blue Dark
Bootstrap Purple Dark Bootstrap Purple Dark
Material Design
Material Indigo Light Material Indigo Light
Material Deep Purple Light Material Deep Purple Light
Material Indigo Dark Material Indigo Dark
Material Deep Purple Dark Material Deep Purple Dark
Material Design Compact
Material Compact Indigo Light Material Compact Indigo Light
Material Compact Deep Purple Light Material Compact Deep Purple Light
Material Compact Indigo Dark Material Compact Indigo Dark
Material Compact Deep Purple Dark Material Compact Deep Purple Dark
Legacy
Nova Light Nova Light
Nova Dark Nova Dark
Nova Colored Nova Colored
Luna Amber Luna Amber
Luna Blue Luna Blue
Luna Green Luna Green
Luna Pink Luna Pink

DataTable Filter

Filtering updates the data based on the constraints.

Column Filtering
List of Customers
NameCountryRepresentative
Join Date
Status
Activity
Murillo I Venere AustraliaAnna Fali2026-10-06 NEGOTIATION
Cody Y Figeroa SpainBernardo Dominic2026-10-05 NEGOTIATION
Jeanfrancois O Nestle United KingdomAsiya Javayant2026-10-17 UNQUALIFIED
Murillo P Stenseth IndiaElwin Sharvill2026-10-20 NEW
Francesco D Briddick IndiaXuxue Feng2026-10-24 NEW
Julie B Briddick JapanBernardo Dominic2026-09-29 PROPOSAL
Jones F Rim United KingdomOnyama Limba2026-10-25 NEW
Adams C Saylors JapanXuxue Feng2026-10-22 NEGOTIATION
Sinclair N Malet CanadaBernardo Dominic2026-10-03 QUALIFIED
Adams L Garufi FranceStephen Shaw2026-10-15 NEGOTIATION
Default Filter
List of Customers
NameCountryRepresentative
Join Date
Status
Activity
Leja V Oldroyd IndiaStephen Shaw2026-10-21 NEW
Leon D Schemmer IndiaElwin Sharvill2026-10-16 NEW
Arvin C Morasca ArgentinaIvan Magalhaes2026-10-03 NEW
Murillo E Doe AustraliaBernardo Dominic2026-10-02 NEW
Alejandro L Albares BrazilIoni Bowcher2026-10-21 NEW
Nicolas M Sergi FranceXuxue Feng2026-10-10 NEW
Francesco D Morasca JapanIoni Bowcher2026-10-03 NEW
Johnson H Vocelka AustraliaBernardo Dominic2026-10-27 NEW
Tony Z Paprocki United KingdomIvan Magalhaes2026-10-17 NEW
David M Flosi FranceElwin Sharvill2026-10-23 NEW
Global Filter Function
NameCountryRepresentativeDateStatusActivity
Ivar P Tollner AustraliaElwin Sharvill2026-10-24 NEW
Misaki L Kolmetz FranceAmy Elsner2026-10-04 NEW
Leja O Chui BrazilElwin Sharvill2026-10-19 NEGOTIATION
Tony W Garufi United KingdomStephen Shaw2026-10-06 UNQUALIFIED
Johnson L Campain CanadaIoni Bowcher2026-10-26 QUALIFIED
Alejandro U Garufi AustraliaAnna Fali2026-10-01 PROPOSAL
Maria Q Whobrey IndiaAnna Fali2026-10-13 RENEWAL
Antonio Q Flosi GermanyXuxue Feng2026-10-04 QUALIFIED
Silvio W Garufi FranceBernardo Dominic2026-10-22 QUALIFIED
Ivar Q Nestle FranceBernardo Dominic2026-10-28 NEW
Filter toggling

1. Hide filter components initially by adding ui-filter-togglable as styleClass to the datatable.
2. To show/hide the filter components call PF('customersTable4').toggleFilter().

List of Customers
Switch toggle with manual toggleFilter()
NameCountryRepresentative
Join Date
Status
Activity
Murillo I Venere AustraliaAnna Fali2026-10-06 NEGOTIATION
Cody Y Figeroa SpainBernardo Dominic2026-10-05 NEGOTIATION
Jeanfrancois O Nestle United KingdomAsiya Javayant2026-10-17 UNQUALIFIED
Murillo P Stenseth IndiaElwin Sharvill2026-10-20 NEW
Francesco D Briddick IndiaXuxue Feng2026-10-24 NEW
Julie B Briddick JapanBernardo Dominic2026-09-29 PROPOSAL
Jones F Rim United KingdomOnyama Limba2026-10-25 NEW
Adams C Saylors JapanXuxue Feng2026-10-22 NEGOTIATION
Sinclair N Malet CanadaBernardo Dominic2026-10-03 QUALIFIED
Adams L Garufi FranceStephen Shaw2026-10-15 NEGOTIATION

<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}" partialUpdate="false">

            <f:facet name="header">
                <div class="flex align-items-center justify-content-between">
                    <span>List of Customers</span>
                    <div>
                    <p:inputText id="globalFilter" onkeyup="PrimeFaces.debounce(() => 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>
            <f:facet name="footer">
                <div class="flex align-items-center justify-content-center">
                   <span>Total Customers: #{dtFilterView.filteredCustomers1 == null ? dtFilterView.customers1.size() : dtFilterView.filteredCustomers1.size()}</span>
                </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()"  autoWidth="false">
                        <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()" />
                </f:facet>
            </p:column>

            <p:column field="status" headerText="Status" filterMatchMode="exact">
                <f:facet name="filter">
                    <p:selectOneMenu onchange="PF('customersTable').filter()"  autoWidth="false">
                        <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="jakarta.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" autoWidth="false">
                        <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()"  />
                </f:facet>
            </p:column>

            <p:column field="status" headerText="Status" filterMatchMode="exact">
                <f:facet name="filter">
                    <p:selectOneMenu onchange="PF('customersTable2').filter()"  autoWidth="false">
                        <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="jakarta.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="PrimeFaces.debounce(() => 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>

<div class="card">
    <h5>Filter toggling</h5>
    <p>1. Hide filter components initially by adding <code>ui-filter-togglable</code> as <em>styleClass</em> to the datatable. <br/>
        2. To show/hide the filter components call <code>PF('customersTable4').toggleFilter()</code>.</p>
    <h:form id="customersForm4">
        <p:dataTable id="customers" var="customer" value="#{dtFilterView.customers1}" widgetVar="customersTable4"
                     emptyMessage="No customers found with given criteria" stickyHeader="true" stickyTopAt=".layout-topbar"
                     filteredValue="#{dtFilterView.filteredCustomers1}" styleClass="ui-filter-togglable">

            <f:facet name="header">
                <div class="flex align-items-center justify-content-between">
                    <span>List of Customers</span>
                    <div align="right">
                        <span>Switch toggle with manual toggleFilter()</span>
                        <p:toggleSwitch id="manualToggle" styleClass="vertical-align-middle ml-3" onchange="PF('customersTable4').toggleFilter()" onIcon="pi pi-filter" offIcon="pi pi-filter-slash"/>
                    </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()" autoWidth="false">
                        <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()" />
                </f:facet>
            </p:column>

            <p:column field="status" headerText="Status" filterMatchMode="exact">
                <f:facet name="filter">
                    <p:selectOneMenu onchange="PF('customersTable').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="jakarta.faces.Integer">
                <p:progressBar value="#{customer.activity}" displayOnly="true" style="height: .5rem" />
            </p:column>

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