How to Search or Filter Table by Column? How to implement a table filter in Angular 6+?
In this article, I'm sharing the great concepts and code samples of Angular 6 and 7 custom Pipe for filtering or searching table by one or multiple columns data ( using by Angular 2, 4, 5, 6,7,8 and 9).
Try this live Example, It will very helpful to you
https://stackblitz.com/edit/angular-cvdqle?file=src/app/hello.component.ts
In this article, I'm sharing the great concepts and code samples of Angular 6 and 7 custom Pipe for filtering or searching table by one or multiple columns data ( using by Angular 2, 4, 5, 6,7,8 and 9).
The following steps can be used to create a search filter for filtering table by your specific column.
1. Create a Custom Pipe
2. Include Custom Pipe in your Module
3. Modify Component for Data display on HTML view for search fields
4. Apply Custom Pipe in Component’s view to filter Table by Column
5. Result
Create a Custom Pipe -
1) The first argument represents the data (customerData array) on which is applied for filters the table’s columns.
2) The second argument represents the input filter text.
2) The second argument represents the input filter text.
3) The third argument represents the one or multiple filter keys columns which is applied to filters.
grd-filter.pipe.ts -
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'grdFilter'
})
export class GrdFilterPipe implements PipeTransform {
transform(items: any, filter: any, defaultFilter: boolean): any {
if (!filter){
return items;
}
if (!Array.isArray(items)){
return items;
}
if (filter && Array.isArray(items)) {
let filterKeys = Object.keys(filter);
if (defaultFilter) {
return items.filter(item =>
filterKeys.reduce((x, keyName) =>
(x && new RegExp(filter[keyName], 'gi').test(item[keyName])) || filter[keyName] == "", true));
}
else {
return items.filter(item => {
return filterKeys.some((keyName) => {
return new RegExp(filter[keyName], 'gi').test(item[keyName]) || filter[keyName] == "";
});
});
}
}
}
}
Include Custom Pipe in the Module - app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {RouterModule} from '@angular/router';
import { AppComponent } from './app.component';
import { CustomerComponent } from './customer/customer.component';
import { GrdFilterPipe } from './grd-filter.pipe';
@NgModule({
declarations: [
AppComponent,
CustomerComponent,
GrdFilterPipe
],
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot([
{ path: 'customer-link', component: CustomerComponent }
])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Modify Component for Data and Search Field - customer.component.ts
import { Component, OnInit } from '@angular/core';
MsoNormal" style="background: #1E1E1E; line-height: 14.25pt; margin-bottom: .0001pt; margin-bottom: 0cm;">
@Component({
@Component({
selector: 'app-customer',
templateUrl: './customer.component.html',
styleUrls: ['./customer.component.css']
})
export class CustomerComponent implements OnInit {
public searchText : string;
public customerData : any;
constructor() { }
ngOnInit() {
this.customerData = [
{"name": 'Anil kumar', "Age": 34, "blog" :'https://code-view.com'},
{"name": 'Sunil Kumar Singh', "Age": 28, "blog" :'https://code-sample.xyz'},
{"name": 'Sushil Singh', "Age": 24, "blog" :'https://code-sample.com'},
{"name": 'Aradhya Singh', "Age": 5, "blog" :'https://code-sample.com'},
{"name": 'Reena Singh', "Age": 28, "blog" :'https://code-sample.com'},
{"name": 'Alok Singh', "Age": 35, "blog" :'https://code-sample.com'},
{"name": 'Dilip Singh', "Age": 34, "blog" :'https://code-sample.com'}];
}
}
Apply Custom Pipe in Component's view to filter Table by Column - customer.component.html
<input [(ngModel)]="searchText" placeholder="Search.." class="advancedSearchTextbox">
<p></p>
<table *ngFor="let emp of customerData | grdFilter: {name: searchText, Age:searchText, blog: searchText}; let i=index;">
<tr>
<td style="width: 5%;">{{i +1}}</td>
<td style="width: 10%;">{{emp.name}}</td>
<td style="width: 5%;">{{emp.Age}}</td>
<td style="width: 15%;">{{emp.blog}}</td>
</tr>
</table>
Try this live Example, It will very helpful to you
https://stackblitz.com/edit/angular-cvdqle?file=src/app/hello.component.ts