title: Dropdown filter is not working in with Row Group table in PrimeNG controls
body: <p>In my angular project, I have installed PrimeNG controls version 11.4.4. I have used Table control to create tabular data to show the rows in the group with collapsible style.</p>
  <p>Now I have added a textbox and dropdown control right before the header row to filter the table data. But the problem is with Row Group table data, filtering with dropdown is not working always. Only the dropdown item Accessories is working. But for other dropdown item filtering is not working.</p>
  <p><a href="https://github.com/mnu-nasir/PrimeNGDemo" rel="nofollow noreferrer">Here is my GitHub Repo.</a></p>
  <p>Can anyone please run the code to see the problem and suggest to me how to solve this?</p>
  <pre><code>&lt;h2&gt;Table with Rog Group&lt;/h2&gt;
  
  &lt;p-table #dt2 [columns]=&quot;selectedColumns&quot; [value]=&quot;products&quot; sortField=&quot;category&quot; sortMode=&quot;single&quot; (onSort)=&quot;onSort()&quot;
    dataKey=&quot;category&quot; styleClass=&quot;p-datatable-gridlines p-datatable-striped&quot;&gt;
    &lt;ng-template pTemplate=&quot;header&quot; let-columns&gt;
      &lt;tr&gt;
        &lt;th *ngFor=&quot;let col of columns&quot;&gt;
          {{col.header}}
        &lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;th *ngFor=&quot;let col of columns&quot; [ngSwitch]=&quot;col.field&quot;&gt;
          &lt;p-columnFilter *ngSwitchCase=&quot;'code'&quot; type=&quot;text&quot; field=&quot;code&quot; matchMode=&quot;contains&quot;
            (input)=&quot;applyFilter1($event, 'code', 'contains')&quot;&gt;
          &lt;/p-columnFilter&gt;
  
          &lt;p-columnFilter *ngSwitchCase=&quot;'name'&quot; type=&quot;text&quot; field=&quot;name&quot; matchMode=&quot;contains&quot;
            (input)=&quot;applyFilter1($event, 'name', 'contains')&quot;&gt;
          &lt;/p-columnFilter&gt;
  
          &lt;p-columnFilter *ngSwitchCase=&quot;'category'&quot; field=&quot;category&quot; matchMode=&quot;equals&quot; [showMenu]=&quot;false&quot;&gt;
            &lt;ng-template pTemplate=&quot;filter&quot; let-value let-filter=&quot;filterCallback&quot;&gt;
              &lt;p-dropdown [ngModel]=&quot;value&quot; [options]=&quot;categories&quot; (onChange)=&quot;filter($event.value)&quot; placeholder=&quot;Any&quot;
                [showClear]=&quot;true&quot;&gt;
                &lt;ng-template let-option pTemplate=&quot;item&quot;&gt;
                  &lt;div class=&quot;p-multiselect-representative-option&quot;&gt;
                    &lt;span class=&quot;p-ml-1&quot;&gt;{{option.label}}&lt;/span&gt;
                  &lt;/div&gt;
                &lt;/ng-template&gt;
              &lt;/p-dropdown&gt;
            &lt;/ng-template&gt;
          &lt;/p-columnFilter&gt;
  
          &lt;p-columnFilter *ngSwitchCase=&quot;'quantity'&quot; type=&quot;text&quot; field=&quot;quantity&quot; matchMode=&quot;equals&quot;
            (input)=&quot;dt2.filter($event.target.value1)&quot;&gt;
          &lt;/p-columnFilter&gt;
        &lt;/th&gt;
      &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate=&quot;body&quot; let-rowData let-rowIndex=&quot;rowIndex&quot; let-expanded=&quot;expanded&quot;&gt;
      &lt;tr *ngIf=&quot;rowGroupMetadata[rowData.category].index === rowIndex&quot;&gt;
        &lt;td colspan=&quot;4&quot;&gt;
          &lt;button type=&quot;button&quot; pButton pRipple [pRowToggler]=&quot;rowData&quot;
            class=&quot;p-button-text p-button-rounded p-button-plain p-mr-2&quot;
            [icon]=&quot;expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'&quot;&gt;&lt;/button&gt;
          &lt;span class=&quot;p-text-bold p-ml-2&quot;&gt;{{rowData.category}}&lt;/span&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/ng-template&gt;
  
    &lt;ng-template pTemplate=&quot;rowexpansion&quot; let-rowData let-columns=&quot;columns&quot;&gt;
      &lt;tr&gt;
        &lt;td *ngFor=&quot;let col of columns&quot;&gt;
          &lt;span&gt;{{rowData[col.field]}}&lt;/span&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/ng-template&gt;
  &lt;/p-table&gt;
  </code></pre>
  <p>TS file:</p>
  <pre class="lang-js prettyprint-override"><code>import { Component, Input, OnInit, ViewChild } from '@angular/core';
  import { Table } from 'primeng/table';
  import { Product } from '../_models/product.model';
  import { ProductService } from '../_services/product.service';
  
  @Component({
    selector: 'app-row-group-grid',
    templateUrl: './row-group-grid.component.html',
    styleUrls: ['./row-group-grid.component.css']
  })
  export class RowGroupGridComponent implements OnInit {
    products: Product[] = [];
  
    cols: any[] = [];
    _selectedColumns: any[] = [];
    categories: any[] = [];
    rowGroupMetadata: any;
  
    @ViewChild('dt2') dt2!: Table;
  
    constructor(private productService: ProductService) { }
  
    ngOnInit() {
      this.productService.getProductsSmall().then(data =&gt; {
        this.products = data;
        this.updateRowGroupMetaData();
      });
  
      this.cols = [
        { field: 'code', header: 'Code' },
        { field: 'name', header: 'Name' },
        { field: 'category', header: 'Category' },
        { field: 'quantity', header: 'Quantity' }
      ];
  
      this._selectedColumns = this.cols;
  
      this.categories = [      
        { label: &quot;Clothing&quot;, value: &quot;Clothing&quot; },
        { label: &quot;Electronics&quot;, value: &quot;Electronics&quot; },
        { label: &quot;Fitness&quot;, value: &quot;Fitness&quot; },
        { label: &quot;Accessories&quot;, value: &quot;Accessories&quot; },
      ];
    }
  
    @Input() get selectedColumns(): any[] {
      return this._selectedColumns;
    }
  
    set selectedColumns(val: any[]) {
      //restore original order
      this._selectedColumns = this.cols.filter(col =&gt; val.includes(col));
    }
  
    applyFilter1($event: any, field: string, matchMode: string) {
      let value = ($event.target as HTMLInputElement)?.value;
      this.dt2.filter(value, field, matchMode);
    }
  
    onSort() {
      this.updateRowGroupMetaData();
    }
  
    updateRowGroupMetaData() {
      this.rowGroupMetadata = {};
  
      if (this.products) {
        for (let i = 0; i &lt; this.products.length; i++) {
          let rowData = this.products[i];
          let category1 = rowData.category;
  
          if (i == 0) {
            this.rowGroupMetadata[category1] = { index: 0, size: 1 };
          }
          else {
            let previousRowData = this.products[i - 1];
            let previousRowGroup = previousRowData.category;
  
            if (category1 === previousRowGroup)
              this.rowGroupMetadata[category1].size++;
            else
              this.rowGroupMetadata[category1] = { index: i, size: 1 };
          }
        }
      }
    }
  }
  </code></pre>