PrimeNG Tutorial - DataTable Filter(Search) Example








PrimeNG Tutorial - DataTable Filter(Search) Example


Overview

In previous tutorial PrimeNG Tutorial - DataTable Pagination (Paginator) Example we had implemented pagination for the datatable. In this tutorial we will be modifying the datatable to add search filters. PrimeNG DataTable provides API methods to add your own search functions.  
PrimeNG DataTable Filters Example
Filters will be of 3 types -
  • Global - Apply Filter to all columns of the Datatable
  • Regular - Apply simple Filter to single column of the Datatable
  • Custom - Apply Filter to single column of the Datatable using some backing object whose values user can select as filter

PrimeNG filtering type can be any one of the following -  
PrimeNG DataTable Filter Type Example
  • StartsWith -Returns the values which start with the specified value.
  • EndsWith -Returns the values which ends with the specified value.
  • Contains -Returns the values which contains the specified value.
  • Equals -Returns the values which exactly matches the specified value.
In the examples below we have made use of contains filtering type. But you may use any of the above filtering type.

Video Tutorial

Table Of Contents :


Implementation

In previous tutorial we had implemented PrimeNG Datatable Pagination.  If we run the application and go to localhost:4200/books we get the following book list-  
PrimeNG DataTable - Paginator Example

Implement Global Filter for DataTable.

Make the following changes
  • Create a local variable for the datatable and name it dt.
  • Define the global filter for the datatable. For input specify the filter type as contains.
  • The keyup event of global filter input will be listened to for filtering.
<p-table #dt [columns]="cols" [value]="books" [paginator]="true" [rows]="10" [rowsPerPageOptions]="[5,10,15,20]"
  totalRecords="totalRecords" pageLinks="3">
  <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" (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto">
    </div>
</ng-template>
  
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns">
        {{col.header}}
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr>
      <td *ngFor="let col of columns">
        {{rowData[col.field]}}
      </td>
    </tr>
  </ng-template>
</p-table>
 
If we now go to localhost:8080/books we can see the global filter-  
PrimeNG DataTable - Global Filter Example
Enter some value and test it-  
PrimeNG DataTable - Global Filter

Implement Simple Filter for DataTable Column.

Next we implement simple filtering for a datatable column. We will be applying the filter to Name column
<p-table #dt [columns]="cols" [value]="books" [paginator]="true" [rows]="10" [rowsPerPageOptions]="[5,10,15,20]"
  totalRecords="totalRecords" pageLinks="3">
  <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"
        (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto">
    </div>
  </ng-template>

  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns">
        {{col.header}}
      </th>
    </tr>

    <tr>
      <th *ngFor="let col of columns" [ngSwitch]="col.field">
        <input *ngSwitchCase="'name'" pInputText type="text"
          (input)="dt.filter($event.target.value, col.field, 'contains')" />
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr>
      <td *ngFor="let col of columns">
        {{rowData[col.field]}}
      </td>
    </tr>
  </ng-template>
</p-table>
If we now go to localhost:8080/books we can see the simple filter-  
PrimeNG DataTable - Simple Filter Example
Enter some value and test it-  
PrimeNG DataTable - Simple Filter

Implement Custom Filter for DataTable Column.

Regular column filter a user can enter any value for filtering. But suppose we want the user to use only certain values for filtering. This can be achieved using custom filters. 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 allAuthors. It will be an array of name-value pairs for the authors. Create the backing object as follows-
import { Component, OnInit } from '@angular/core';
import { BookService, Book } from '../service/book.service';

@Component({
  selector: 'app-book-data',
  templateUrl: './book-data.component.html',
  styleUrls: ['./book-data.component.css']
})
export class BookDataComponent implements OnInit {

  books: Book[];

  cols: any[];

  totalRecords: number;

  allAuthors: any[];

   constructor(private bookService: BookService) { }

  ngOnInit() {
      this.bookService.getBooks().
      then(books => this.books = books);

      this.cols = [
        { field: 'name', header: 'Name' },
        {field: 'author', header: 'Author' },
        { field: 'price', header: 'Price' }      
    ];

    this.totalRecords=this.cols.length;

    this.allAuthors = [
      { label: 'All Authors', value: null },
      { label: 'Mario Puzo', value: 'Mario Puzo' },
      { label: 'J.R.R. Tolkien', value: 'J.R.R. Tolkien' },
      { label: 'J.K. Rowling', value: 'J.K. Rowling' },
      { label: 'author1', value: 'author1' },
      { label: 'author2', value: 'author2' },
      { label: 'author3', value: 'author3' }
      
  ];

}

}

For the column author using a switch statement 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.
<p-table #dt [columns]="cols" [value]="books" [paginator]="true" [rows]="10" [rowsPerPageOptions]="[5,10,15,20]"
  totalRecords="totalRecords" pageLinks="3">
  <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"
        (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto">
    </div>
  </ng-template>

  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns">
        {{col.header}}
      </th>
    </tr>

    <tr>
      <th *ngFor="let col of columns" [ngSwitch]="col.field">
        <input *ngSwitchCase="'name'" pInputText type="text"
          (input)="dt.filter($event.target.value, col.field, 'contains')" />
      
     <p-dropdown *ngSwitchCase="'author'" [options]="allAuthors" 
      [style]="{'width':'100%'}" (onChange)="dt.filter($event.value, col.field, 'equals')"></p-dropdown>
    </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr>
      <td *ngFor="let col of columns">
        {{rowData[col.field]}}
      </td>
    </tr>
  </ng-template>
</p-table>
Also as we are making use of the dropdown we need to import the DropdownModule in the app.module.ts file.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BookDataComponent } from './book-data/book-data.component';
import {TableModule} from 'primeng/table';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {DropdownModule} from 'primeng/dropdown';

@NgModule({
  declarations: [
    AppComponent,
    BookDataComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    TableModule,
    FormsModule,
    HttpClientModule,
    BrowserAnimationsModule,
    DropdownModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
If we now go to localhost:8080/books we can see the Custom filter-  
PrimeNG DataTable - Custom Filter Example
Select a value from dropdown and test it-  
PrimeNG DataTable - Custom Filter

Downloads-

PrimeNG DataTable Filter Example