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.

Answer 1

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() .