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.
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 -
- 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.
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-
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-
Enter some value and test it-
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>
Enter some value and test it-
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-
Select a value from dropdown and test it-
