How to Search or Filter Table by Column?
In this article, I will share the concepts and code samples of Create a Custom Pipe for filtering or searching table by one or multiple columns data in Angular 2, 4, 5, and 6.
How to implement a table filter in Angular 6?
In this article, I will share the concepts and code samples of Create a Custom Pipe for filtering or searching table by one or multiple columns data in Angular 2, 4, 5, and 6.
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 -
The first argument represents the data (customerData array) on which is applied for filters the table’s columns.
The second argument represents the one or multiple filter keys columns which is applied to filters.
The third argument represents the input filter text
grd-filter.pipe.ts -
import{ Pipe, PipeTransform} from '@angular/core';
@Pipe({
name: 'grdFilter'
})
exportclass GrdFilterPipeimplements 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) {
returnitems.filter(item=>
filterKeys.reduce((x, keyName) =>
(x&& newRegExp(filter[keyName], 'gi').test(item[keyName])) || filter[keyName] == "", true));
}
else {
returnitems.filter(item=> {
returnfilterKeys.some((keyName) => {
returnnew 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]
})
exportclass AppModule{ }
Modify Component for Data and Search Field - customer.component.ts
import{ Component, OnInit} from '@angular/core';
@Component({
selector: 'app-customer',
templateUrl: './customer.component.html',
styleUrls: ['./customer.component.css']
})
exportclass CustomerComponentimplements 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"
