DataTable - Filtering

Datatable provides column based and global data filtering feature. There are various different match modes, "startsWith"(default), "endsWith", "contains", "exact", "lte", "lt", "gte", "gt", "in" and "equals". In addition to built-in generated filter elements, custom components can be used as filter facets.

Search all fields:
ModelYear
Manufacturer
  • Select
  • Mercedes
  • BMW
  • Volvo
  • Audi
  • Renault
  • Opel
  • Volkswagen
  • Honda
  • Jaguar
  • Ford
Color
Status
All
Sold
Sale
Price
containslteexactinequalscustom (min)
d2c3b5c11999BMWOrangeSold$99,296.00
6c7050bc1981FordOrangeSale$42,656.00
75a23b971973VolvoSilverSold$13,973.00
a7755e541968HondaMaroonSold$26,878.00
eba8611d1977JaguarBlackSale$72,391.00
af81d82c2003OpelBrownSale$14,411.00
84d3f6c91970VolvoBlueSold$14,056.00
2ebdf0eb1993OpelMaroonSale$58,134.00
1d297fb71989AudiBlueSold$33,616.00

Source

<h:form id="form">
                
    <p:dataTable id="dataTable" var="car" value="#{tableBean.carsSmall}" widgetVar="carsTable"
                 emptyMessage="No cars found with given criteria" filteredValue="#{tableBean.filteredCars}">

        <f:facet name="header">
            <p:outputPanel>
                <h:outputText value="Search all fields:" />
                <p:inputText id="globalFilter" onkeyup="PF('carsTable').filter()" style="width:150px" placeholder="Enter keyword"/>
            </p:outputPanel>
        </f:facet>

        <p:column id="modelColumn" filterBy="model" headerText="Model" footerText="contains" filterMatchMode="contains">
            <h:outputText value="#{car.model}" />
        </p:column>

        <p:column id="yearColumn" filterBy="year" headerText="Year" footerText="lte" filterMatchMode="lte">
            <f:facet name="filter">
                <p:spinner onchange="PF('carsTable').filter()" min="1960" max="2010" styleClass="year-spinner">
                    <f:converter converterId="javax.faces.Integer" />
                </p:spinner>
            </f:facet>
            <h:outputText value="#{car.year}" />
        </p:column>

        <p:column id="manufacturerColumn" filterBy="manufacturer" headerText="Manufacturer" footerText="exact" filterMatchMode="exact">
            <f:facet name="filter">
                <p:selectOneMenu onchange="PF('carsTable').filter()" >
                    <f:selectItems value="#{tableBean.manufacturerOptions}" />
                </p:selectOneMenu>
            </f:facet>
            <h:outputText value="#{car.manufacturer}" />
        </p:column>

        <p:column id="colorColumn" filterBy="color" headerText="Color" footerText="in" filterMatchMode="in">
            <f:facet name="filter">
                <p:selectCheckboxMenu label="Colors" onchange="PF('carsTable').filter()" panelStyle="width:125px" scrollHeight="150">
                    <f:selectItems value="#{tableBean.colors}" />
                </p:selectCheckboxMenu>
            </f:facet>
            <h:outputText value="#{car.color}" />
        </p:column>

        <p:column id="soldColumn" filterBy="sold" headerText="Status" footerText="equals" filterMatchMode="equals">
            <f:facet name="filter">
                <p:selectOneButton onchange="PF('carsTable').filter()">
                    <f:converter converterId="javax.faces.Boolean" />
                    <f:selectItem itemLabel="All" itemValue="" />
                    <f:selectItem itemLabel="Sold" itemValue="true" />
                    <f:selectItem itemLabel="Sale" itemValue="false" />
                </p:selectOneButton>
            </f:facet>
            <h:outputText value="#{car.sold ? 'Sold': 'Sale'}" />
        </p:column>

        <p:column id="priceColumn" filterBy="price" headerText="Price" footerText="custom (min)" filterFunction="#{tableBean.filterByPrice}">
            <h:outputText value="#{car.price}">
                <f:convertNumber currencySymbol="$" type="currency"/>
            </h:outputText>
        </p:column>

    </p:dataTable>

</h:form>