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.
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 -
- 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-
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-
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>
between
If we now go to localhost:8080/books we can see the simple filter-
Enter some value and test it-
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-
Select a value from dropdown and test it-
