The filtering feature is provided by enabling the filter property on each column. The filter can be applied on a column level and whole table level as well. The table level filtering is also called global filtering. To enable global filter, the local template variable of input need to be referred in the globalFilter property. The keyup event of global filter input will be listened to for filtering.

The filter feature supports optional filter properties such as filterMatchMode to provide different types of a text search. It has five filter match modes such as startsWith, contains, endsWith, equals, and in and the default match mode is startsWith, whereas the filterPlaceholder property is used to display the helper place holder text. The DataTable component with the filtering feature on table columns would be written as follows:

<div class="ui-widget-header align-globalfilter">
  <i class="fa fa-search search-globalfilter"></i>
  <input #gb type="text" pInputText size="50" 
  placeholder="Global Filter">
</div>
<p-dataTable [value]="browsers" [rows]="10" [paginator]="true"   
  [globalFilter]="gb" #datatable (onFilter)="onFilter($event)">
  <p-header>List of Browsers</p-header>
  <p-column field="browser" header="Browser (contains)" [filter]="true" 
    [filterMatchMode]="contains" filterPlaceholder="Search"></p-column>
  <p-column field="platform" header="Platform (startsWith)" 
    [filter]="true"
    filterPlaceholder="Search"></p-column>
  <p-column field="rating" header="Rating ({{browserFilter||'No 
    Filter'}}" 
    [filter]="true" filterMatchMode="equals" [style]="
    {'overflow':'visible'}">
    <ng-template pTemplate="filter" let-col>
      <i class="fa fa-close"
        (click)="ratingFilter=null; 
        datatable.filter(null,col.field,col.filterMatchMode)"></i>
      <p-slider [styleClass]="'slider-layout'"
        [(ngModel)]="ratingFilter" [min]="1" [max]="10"
        (onSlideEnd)="datatable.filter
        ($event.value,col.field,col.filterMatchMode)">
      </p-slider>
    </ng-template>
  </p-column>
  <p-column field="engine" header="Engine (Custom)" [filter]="true"
    filterMatchMode="equals" [style]="{'overflow':'visible'}">
    <ng-template pTemplate="filter" let-col>
      <p-dropdown [options]="engines" [style]="{'width':'100%'}"
        (onChange)="datatable.filter($event.value,col.field,
        col.filterMatchMode)" styleClass="ui-column-filter">
      </p-dropdown>
    </ng-template>
  </p-column>
  <p-column field="grade" header="Grade (Custom)" [filter]="true"
    filterMatchMode="in" [style]="{'overflow':'visible'}">
    <ng-template pTemplate="filter" let-col>
      <p-multiSelect [options]="grades" defaultLabel="All grades"
        (onChange)="datatable.filter($event.value,col.field,
        col.filterMatchMode)" styleClass="ui-column-filter">
      </p-multiSelect>
    </ng-template>
  </p-column>
</p-dataTable>

The filtering feature is normally applied on a plain input component, but this behavior can also be customized by providing a filter on various other inputs such as Spinner, Slider, DropDown, and MultiSelect components. The custom input filter calls a filter function with three parameters. The signature of the filter function would be written as follows:

datatable.filter($event.value, col.field, col.filterMatchMode)

The following screenshot shows a snapshot result with a filtering feature on a limited number of records as an example:

In the preceding snapshot, we can observe that the data is filtered by a rating slider and multi select grade field. The filtering feature also provides the onFilter event callback, which will be invoked on filtering an input. Refer to the event details section for more information.