Filter Nested Data in Material Table (Mat Table) in angular 6/7/8.

Aman Sharma

In previous article, we discussed how to sort nested data in Angular 8. One of reader need help to filter nested data.

Just Copy this code and paste in your constructor.  

Here is the code to filter nested data. Which is general code to filter whole table with nested data. 




this.dataCompanySource.filterPredicate = (data, filter:string)=> {

      const accumulator = (currentTerm, key) => {

        return this.nestedFilterCheck(currentTerm, data, key);


      const dataStr = Object.keys(data).reduce(accumulator, '').toLowerCase();

      // Transform the filter by converting it to lowercase and removing whitespace.

      const transformedFilter = filter.trim().toLowerCase();

      return dataStr.indexOf(transformedFilter) !== -1;





  nestedFilterCheck(search, data, key) {

    if (typeof data[key] === 'object') {

      for (const k in data[key]) {

        if (data[key][k] !== null) {

          search = this.nestedFilterCheck(search, data[key], k);



    } else {

      search += data[key];


    return search;




Post a Comment

Post a Comment (0)

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !