DataTable - Filter

Filtering updates the data based on the constraints.

Documentation
Search all fields:
IdYear
Brand
Color
Status
All
Sold
Sale
Price
containslteexactinequalscustom (min)
ef3d8e7b1980AudiOrangeSold$38,925.00
901f5d942003MercedesBlackSale$75,423.00
ec593b6e1969RenaultWhiteSold$87,953.00
68d0b37d1982BMWGreenSold$20,934.00
10387b3c1969FiatSilverSold$30,798.00
4a9eedc41988RenaultOrangeSold$96,220.00
4373c7cb1991VolvoYellowSale$16,289.00
561b5d161979FiatYellowSale$73,537.00
ad1c42901970VolkswagenBlueSale$85,397.00
ab63466b1982FiatBlackSale$19,251.00
Search all fields using globalFilterFunction:
IdYearBrandColorStatusPrice
77a9407c1987VolvoGreenSale$25,000.00
8ad6d2f51987VolkswagenYellowSale$12,415.00
7b4e7b9b1991MercedesOrangeSold$99,433.00
022c9d221970HondaSilverSale$23,079.00
817883801994BMWRedSold$15,623.00
addf219d1985VolkswagenGreenSold$62,041.00
98cd01671991BMWBlackSale$94,711.00
228b9c161967RenaultBrownSold$37,014.00
77da0d811996JaguarMaroonSold$59,738.00
508236e61974BMWRedSold$81,117.00
<style type="text/css">
    .ui-datatable {
        margin-bottom: 25px
    }

    .ui-datatable .ui-datatable-header {
        text-align: right !important;
    }

    .ui-button-text-only .ui-button-text {
        padding: 0.3em 0.4em;
    }

    .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-header .ui-chkbox {
        visibility: hidden;
    }

    .ui-filter-column .ui-column-customfilter .custom-filter {
        width: 100%;
        box-sizing: border-box;
    }

    .year-spinner input {
        width: 100%;
        box-sizing: border-box;
    }
</style>


<h:form>
    <p:dataTable var="car" value="#{dtFilterView.cars1}" widgetVar="carsTable1"
                 emptyMessage="No cars found with given criteria" filteredValue="#{dtFilterView.filteredCars1}">

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

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

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

        <p:column filterBy="#{car.brand}" headerText="Brand" footerText="exact" filterMatchMode="exact">
            <f:facet name="filter">
                <p:selectOneMenu onchange="PF('carsTable1').filter()" styleClass="custom-filter">
                    <f:selectItem itemLabel="Select One" itemValue="#{null}" noSelectionOption="true" />
                    <f:selectItems value="#{dtFilterView.brands}" />
                </p:selectOneMenu>
            </f:facet>
            <h:outputText value="#{car.brand}" />
        </p:column>

        <p:column filterBy="#{car.color}" headerText="Color" footerText="in" filterMatchMode="in">
            <f:facet name="filter">
                <p:selectCheckboxMenu label="Colors" onchange="PF('carsTable1').filter()" scrollHeight="150" styleClass="custom-filter">
                    <f:selectItems value="#{dtFilterView.colors}" />
                </p:selectCheckboxMenu>
            </f:facet>
            <h:outputText value="#{car.color}" />
        </p:column>

        <p:column filterBy="#{car.sold}" headerText="Status" footerText="equals" filterMatchMode="equals">
            <f:facet name="filter">
                <p:selectOneButton onchange="PF('carsTable1').filter()" styleClass="custom-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 filterBy="#{car.price}" headerText="Price" footerText="custom (min)" filterFunction="#{dtFilterView.filterByPrice}">
            <h:outputText value="#{car.price}">
                <f:convertNumber currencySymbol="$" type="currency"/>
            </h:outputText>
        </p:column>
    </p:dataTable>

    <p:dataTable var="car" value="#{dtFilterView.cars2}" widgetVar="carsTable2"
                 emptyMessage="No cars found with given criteria" filteredValue="#{dtFilterView.filteredCars2}"
                 globalFilterFunction="#{dtFilterView.globalFilterFunction}">

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

        <p:column headerText="Id">
            <h:outputText value="#{car.id}" />
        </p:column>

        <p:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>

        <p:column headerText="Brand">
            <h:outputText value="#{car.brand}" />
        </p:column>

        <p:column headerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>

        <p:column headerText="Status">
            <h:outputText value="#{car.sold ? 'Sold': 'Sale'}" />
        </p:column>

        <p:column headerText="Price">
            <h:outputText value="#{car.price}">
                <f:convertNumber currencySymbol="$" type="currency"/>
            </h:outputText>
        </p:column>
    </p:dataTable>
</h:form>

FREE THEMES

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

nova-light Nova-Light
nova-dark Nova-Dark
nova-colored Nova-Colored
luna-blue Luna-Blue
luna-amber Luna-Amber
luna-green Luna-Green
luna-pink Luna-Pink
omega Omega

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.