Filtering complex objects in angular material table

Question

I'm working on the filtering functionality of Angular Material table.

The filtering functionality I am trying to develop is, there are fields that the user can input: first name, last name, email, a multi select drop down to select brands and search button to filter based on the selected/entered values.

The version of angular that I'm using is 8.

My data structure looks like:

[{
   firstName: 'Bryan',
   lastName: 'Boz',
   email: '[email protected]',
   brandRoles: [{
      brandName: 'Brand A',
      role: {
        definition: 'System Administrator',
        displayText: 'System Administrator'
      }
    },
    {
      brandName: 'Brand B',
      role: {
        definition: 'Manager',
        displayText: 'Manager'
      }
   }]
}]

What i am trying to achieve is to filter the above which comes in as an array and display the data on table.

No success so far. Any help is appreciated

Some of the examples i've looked up and tried are like : https://stackblitz.com/edit/angular-material-table-multiple-filter-ttewos https://stackblitz.com/edit/angular-hbakxo-xctfqy?file=app/table-filtering-example.ts

Answer 1

For complex filtering requirements you can employ mat-table-filter package.

Stackblitz demo

Answer 2

For custom filter logic have a look at [filterPredicate][1]. There you can define some custom filterlogic.