Primefaces datatable filter specific column in header

In Primefaces datatable, it can filter a specific column by the following code:

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

The code above will generate a filter on the header of the column. What I want is create a filter on the header of datatable, not column. From the ShowCase, there is a code:

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

This will put a filter in header of datatable, but it will filter the all fields of the datatable, which is what I don't want, I want it to filter specific column only, is it possible?

Solution

You could by using a few hacks. First add a widgetVar attribute to your p:dataTable, for example widgetVar="myTable". Then, add an id attribute to you p:column:

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

You can use this id to select the column filter field. In the global filter, you want to remove the id attribute, and add an onkeyup listener which sets the input's value in the column's filter and triggers filtering on the table using the widgetVar.

<f:facet name="header">
  <p:inputText onkeyup="document.getElementById('frm:tbl:clm:filter').value=this.value; PF('myTable').filter();"/>
</f:facet>

Here I assume your form has the ID frm and your data table has the ID tbl. They probably have different IDs, so change the code accordingly.

If you don't want the filter to be visible in the column, you could hide it with a CSS rule:

.ui-datatable .ui-column-filter[id='frm:tbl:clm:filter'] {
  display: none;
}

If you are using lazy loading you could also check out Primefaces lazy datatable: put my own filter instead of GlobalFilter