Locale

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

Input Style

Free Themes

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

PrimeOne Design

Saga Saga
Vela Vela
Arya Arya

Premium Themes

Premium themes are only available exclusively for PrimeFaces Theme Designer subscribers and therefore not included in PrimeFaces core.

Bootstrap light blue and dark blue themes are also included in PrimeFaces 10.x builds for Elite subscribers.

bootstrap4-blue-light Bootstrap Blue
bootstrap4-purple-light Bootstrap Purple
bootstrap4-blue-dark Bootstrap Blue
bootstrap4-purple-dark Bootstrap Purple

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.

Column Filtering
List of Customers
NameCountryRepresentative
Join Date
Status
Activity
Deepesh Chui United KingdomElwin Sharvill2021-10-18 UNQUALIFIED
Kaitlin Ostrosky CanadaXuxue Feng2021-10-09 RENEWAL
Leon Oldroyd AustraliaAnna Fali2021-10-04 UNQUALIFIED
David Darakjy ArgentinaAmy Elsner2021-10-20 QUALIFIED
Juan Wieser ArgentinaElwin Sharvill2021-10-13 NEGOTIATION
Octavia Malet BrazilAmy Elsner2021-09-22 QUALIFIED
Leon Oldroyd United KingdomElwin Sharvill2021-09-22 NEW
Chavez Briddick ArgentinaBernardo Dominic2021-10-10 QUALIFIED
Jefferson Schemmer ItalyStephen Shaw2021-10-08 NEGOTIATION
Salvatore Stockham ArgentinaAnna Fali2021-09-22 RENEWAL
Default Filter
List of Customers
NameCountryRepresentative
Join Date
Status
Activity
Jones Vocelka CanadaAsiya Javayant2021-09-27 NEW
Aika Inouye AustraliaAsiya Javayant2021-10-15 NEW
Adams Morasca ArgentinaAnna Fali2021-09-28 NEW
Jones Vocelka ItalyAsiya Javayant2021-09-24 NEW
Alejandro Perin JapanBernardo Dominic2021-09-27 NEW
Mayumi Kolmetz SpainStephen Shaw2021-10-07 NEW
David Darakjy SpainXuxue Feng2021-10-17 NEW
Aditya Kusko GermanyBernardo Dominic2021-10-03 NEW
Aditya Kusko BrazilIoni Bowcher2021-10-14 NEW
Julie Stenseth JapanStephen Shaw2021-09-27 NEW
Costa Dilliard ArgentinaIvan Magalhaes2021-10-10 NEW
Wickens Nestle BrazilStephen Shaw2021-09-26 NEW
Global Filter Function
NameCountryRepresentativeDateStatusActivity
Isabel Bowley GermanyXuxue Feng2021-09-21 UNQUALIFIED
Alejandro Perin FranceBernardo Dominic2021-10-16 PROPOSAL
Maisha Rulapaugh ArgentinaAmy Elsner2021-10-04 NEGOTIATION
Misaki Royster United KingdomOnyama Limba2021-10-18 NEGOTIATION
Munro Ferencz FranceOnyama Limba2021-10-18 NEW
Claire Tollner FranceBernardo Dominic2021-10-09 PROPOSAL
Juan Wieser FranceAnna Fali2021-10-07 UNQUALIFIED
Ricardo Gaucho CanadaIoni Bowcher2021-09-28 NEGOTIATION
Julie Stenseth United KingdomAnna Fali2021-10-06 QUALIFIED
Salvatore Stockham United KingdomAmy Elsner2021-09-30 PROPOSAL

<style type="text/css">
    .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="p-d-flex p-ai-center p-jc-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" action="#{dtFilterView.toggleGlobalFilter()}"/>
                    </div>
                </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>
    </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('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('customersTable2').filter()" />
                </f:facet>
            </p:column>

            <p:column field="status" headerText="Status" filterMatchMode="exact">
                <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.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>
    </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="p-d-flex p-jc-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>

Session expired

Reloading page

Message:
StackTrace: