How to modify the way the data table filter works in Angular Material?

Question

I am trying to use the filter in Angular Material Data Table like -

If I search for "MATCHED", then both "MATCHED" and "UNMATCHED" comes up in the status column of the Data table.

I know that it is because the data object is reduced and concatenated and the filter is applied(from the Angular Material Docs).

I want to display only the "MATCHED" status, if is search for matched. So I am looking for a filter that will do exact word filtering instead of substrings. How to proceed ?

I read this post but I was not able to proceed.

camden_kid camden_kid · Accepted Answer · 2018-08-30T10:09:58

Here you go - StackBlitz

Following on from the answer that you referred to we need to define filterPredicate :

export class TableFilteringExample {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);

  constructor() {
    this.dataSource.filterPredicate = (data: PeriodicElement, filter: string) => {
      return data.name === filter;
    }
  }

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim();
  }
}

Note that toLowerCase() has been removed from filterValue.trim().

How to modify the way the data table filter works in Angular Material?

1 Answers