custom filter in mat-table

I found the solution here.

It's necessary to rewrite filterPredicate, and just use it as usual, filterPredicate needs to return true when filter passes and false when it doesn't

export interface Element { name: string; position: number; weight: number; symbol: string;}dataSource = new MatTableDataSource(ELEMENT_DATA);/* configure filter */this.dataSource.filterPredicate =   (data: Element, filter: string) => data.name.indexOf(filter) != -1;applyFilter(filterValue: string) {   filterValue = filterValue.trim(); // Remove whitespace   filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches   this.dataSource.filter = filterValue; }

Don't forget to apply .trim().toLowerCase() on your data or you may encounter unexpected results. See my example below:

this.dataSource.filterPredicate = (data:  {name: string}, filterValue: string) =>  data.name.trim().toLowerCase().indexOf(filterValue) !== -1;applyFilter(filterValue: string) {    this.dataSource.filter = filterValue.trim().toLowerCase();}

Be aware that all fields of the class displayed in table rows, are subject to filtering, even if you do not display that field as a column.

export class City {  id: number;//is not displayed in mat table  code: string;  name: string;  country:Country;}

Any filter for the dataSource of city table, also applies to id column, which generally we do not display to the end user.

//this filter will also apply to id columnthis.cityDataSource.filter = filterValue;