PrimeNG Tutorial - DataTable Filter Example








PrimeNG Tutorial - DataTable Filter Example


Overview

In previous tutorial we had implemented PrimeNG Tutorial - DataTable Pagination (Paginator) Example we had implemented pagination for the datatable. In this datatable we will be adding filters.  
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 whosevalues 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.
between

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.
between
<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>
between
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.

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 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.
between
<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 for the above to work we will need to add the DropDownModule in the app.module.ts.
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