Angular + PrimeNG DataTable Filtering Example (2024)

Overview

The new Angular 9 version is available now. The newest release again includes improvements in performance, a smaller bundle size and many more. Moreover, the default is the Ivy renderer. . Check out Angular 9 features.

PrimeNG 9.0.0 release has also recently been available to support Angular 9 and Ivy for first class components and to improve components.

In this article, we begin exploring getting started with latest version of angular 9 and PrimeNg 9 with use of the PrimeNG DataTable filtering with an example.

We will follow below steps to build this example

1. Understand different PrimeNG filtering Option
2. Understand different PrimeNG filtering match modes
3. PrimeNG DataTable Global Filter Example
4. PrimeNG DataTable Simple Filter Example
5. PrimeNG DataTable Custom Filter Example

Lets start

Understand different PrimeNG filtering Option:

Filtering feature is very crucial features for any kind of data iteration component. These features are going to be very helpful while working on large datasets.

We can enabling filtering on datatable at different level, here are different options we have

Global filtering : When the filter is applied on whole table level is called as global filtering

Column filtering : When the filter is applied on a column level is called as Column filtering

Custom filtering : Apply Filter using some backing object whose values user can select as filter

Understand different PrimeNG filtering match modes :

The filter function supports optional filter properties such as filterMatchMode to provide various forms of a search for text. It has 5 matching filter modes, such as

• startsWith
• contains
• endsWith
• equals
• in

while by default match mode is startsWith

In previous tutorial we had implemented Angular PrimeNG Datatable Paginator Example. Now we will see how we can take that code to implement filter functionality

PrimeNG DataTable Global Filter Example

As our setup is ready, lets make the following changes :

Define the global filter for the datatable. For input specify the filter type as contains. between

• Create a local variable for the datatable and name it 'datatable, and add configuration parameters for global filters inside p-table component.

  <p-table #datatable *ngIf="flights" [value]="flights" [paginator]="true"  [rows]="10"
      [showCurrentPageReport]="true" [rowsPerPageOptions]="[10,15,20]"
      currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
      [filterDelay]="0" [globalFilterFields]="['flightNumber','origin','departDay','price']"
                              >

• Next we will Define template for global filter input field with filter type as contains.

  <!-- Global Filter User Input-->
  <ng-template pTemplate="caption">
     <div style="text-align: right">
         <i class="pi pi-search" style="margin:4px 4px 0 0"></i>
          <input type="text" pInputText size="50" placeholder="Global Filter"
            style="width:auto" (input)="datatable.filterGlobal($event.target.value, 'contains')">
     </div>
   </ng-template>

PrimeNG Implement Simple Filter for DataTable Column Example

Next we implement simple filtering for a datatable column. We will be applying the filter to flight Name column :

• Lets define input filter field on top of filight Name header column :

  <!-- Simple Filter-->
  <th>
    <input pInputText type="text" placeholder="Search by Name" class="p-column-filter"
    (input)="datatable.filter($event.target.value, 'flightNumber', 'startsWith')">
  </th>

PrimeNG Implement Custom Filter for DataTable Column Example

Next we will be defining a custom filter for the datatable column. For the author column we will be having a dropdown from which the user can select a value to filter.

• Create a backing object named days. It will be an array of name-value pairs for the days of week. Create the backing object as follows :

  this.days = [
        {label: 'Monday', value: 'monday'},
        {label: 'Tuesday', value: 'tuesday'},
        {label: 'Wednesday', value: 'wednesday'},
        {label: 'Thursday', value: 'thursday'},
        {label: 'Friday', value: 'friday'},
        {label: 'Saturday', value: 'saturday'},
        {label: 'Sunday', value: 'sunday'}
    ]

• For the column Depart Day we will be creating a dropdown to which we will be passing the backing object. On change function of the dropdown we will be filtering the column and providing an exact match as we make use of the equals filter type.

  <!-- Custom Filter-->
  <th>
    <p-dropdown [options]="days" (onChange)="datatable.filter($event.value, 'departDay', 'equals')" styleClass="p-column-filter" placeholder="Select Day" [showClear]="true">
        <ng-template let-option pTemplate="item">
         <span [class]="'customer-badge status-' + option.value">{{option.label}}</span>
        </ng-template>
   </p-dropdown>
   </th>

Final Code and Output :

• Here is the final template code after adding all three type of filter :

  <p-table #datatable *ngIf="flights" [value]="flights" [paginator]="true" [rows]="10" [showCurrentPageReport]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [rowsPerPageOptions]="[10,15,20]" [filterDelay]="0" [globalFilterFields]="['flightNumber','origin','departDay','price']">
  
      <!-- Global Filter User Input-->
      <ng-template pTemplate="caption">
          <div style="text-align: right">
              <i class="pi pi-search" style="margin:4px 4px 0 0"></i>
              <input type="text" pInputText size="50" placeholder="Global Filter" style="width:auto" (input)="datatable.filterGlobal($event.target.value, 'contains')">
          </div>
      </ng-template>
  
      <ng-template pTemplate="header" let-flight>
          <tr>
              <th>Flight</th>
              <th>From</th>
              <th>To</th>
              <th>Depart Day</th>
              <th>Price ($)</th>
          </tr>
  
          <tr>
              <!-- Simple Filter-->
              <th>
                  <input pInputText type="text" (input)="datatable.filter($event.target.value, 'flightNumber', 'startsWith')" placeholder="Search by Name" class="p-column-filter">
              </th>
              <th></th>
              <th></th>
  
              <!-- Custom Filter-->
              <th>
                  <p-dropdown [options]="days" (onChange)="datatable.filter($event.value, 'departDay', 'equals')" styleClass="p-column-filter" placeholder="Select Day" [showClear]="true">
                      <ng-template let-option pTemplate="item">
                          <span [class]="'customer-badge status-' + option.value">{{option.label}}</span>
                      </ng-template>
                  </p-dropdown>
              </th>
              <th></th>
          </tr>
      </ng-template>
  
      <ng-template pTemplate="body" let-flight>
          <tr>
              <td>{{flight.flightNumber}}</td>
              <td>{{flight.origin}}</td>
              <td>{{flight.destination}}</td>
              <td>{{flight.departDay}}</td>
              <td>{{flight.price}}</td>
          </tr>
      </ng-template>
  </p-table>

• Now If we goto localhost:4200 and we can see the following output

Download Source Code

The full source code for this article can be found on below.
Download it here - Angular 9 PrimeNG 9 Datatable Filter Example