Filter not working in Angular Material Table

Question

I am trying to implement Filter in my mat-table.

According to the Docs,

{id: 123, name: 'Mr. Smith', favoriteColor: 'blue'}

is reduced to

 123mr. smithblue

But I have a object with nested values. Eg

{ 
  data: 
    rules:
      name: 'john',
      address: '123 road',
  id: 'id1',
  type: 'normal'
}

Filter works for id and type values but not for the nested values like name and address .

html

<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>

component

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

Can someone please let me know how can I make it work.

Thanks

Answer 1

According to the documentation there is the possibility to specify a custom filterPredicate (https://material.angular.io/components/table/overview#filtering )

For example, the data object {id: 123, name: 'Mr. Smith', favoriteColor: 'blue'} will be reduced to 123mr. smithblue. If your filter string was blue then it would be considered a match because it is contained in the reduced string, and the row would be displayed in the table.

To override the default filtering behavior, a custom filterPredicate function can be set which takes a data object and filter string and returns true if the data object is considered a match.

So on your this.dataSource you can specify a custom method that returns a boolean whether the given result matches

Method ( https://material.angular.io/components/table/api#additional_classes ):

filterPredicate: ((data: T, filter: string) => boolean)

Checks if a data object matches the data source's filter string. By default, each data object is converted to a string of its properties and returns true if the filter has at least one occurrence in that string. By default, the filter string has its whitespace trimmed and the match is case-insensitive. May be overridden for a custom implementation of filter matching.