I am using Angular 6 following the official documentation. The default filtering doesn't seem to work on the nested objects like category and location. I have heard about overriding filterPredicate by doing something like this this.MyDataSource.filterPredicate after instantiation of the data source but I don't get it. Any help on how to be able to search for anything will be appreciated. below is my code snippet for the interface, filter method and the method used to render the data on the table

export interface FacilityDetails {
    status: true;
    message: [
        {
            facilityName: string;
            tillNo: string;
            category: {
                catType: string;
                catName: string;
            };
            location: {
                region: string;
                road: string;
                country: string;
                city: string;
                geoSet: false;
                'geo': {
                    latitude: number;
                    longitude: number;
                }
            }
        }
    ]
}

RenderFacilityTable() {
    this.webService.getFacilityDetails()
    .pipe(
      debounceTime(1000),
      distinctUntilChanged()
    )
    .subscribe((result: any) => {
      result.map((data) => {
        if (data.status) {
          this.MyDataSource = new MatTableDataSource();
          this.MyDataSource.data = data.message;
          this.MyDataSource.paginator = this.paginator;
          console.log('faclitiy detail', this.MyDataSource.data);
          console.log('my data', data.status);
        }
      })
    },
    error => {
      console.log('Error retrieving facilitiy details: ' + error)
    }
    )
  }

filterFacilityDetails(searchString: string) {
    searchString = searchString.trim();
    searchString = searchString.toLowerCase();
    this.MyDataSource.filter = searchString;
  }