PrimeNg turbotable filter doesn't work with row groups

Question

I have a p-table that uses row grouping and filtering features. These features work fine on their own, but when I use them together, the first column that is grouped disappears when applying any filter. This happens on all grouping types (Subheader, Rowspan, etc.).

The code below shows a simple table with four columns which has the first column (EmpName) grouped as a Rowspan. A simple filter has been applied to each column. When the table first shows up, it looks fine. Once you type anything in the filters, the first value (empName) disappears and the values are skewed, i.e. the second column's value shows up in the first column, and so on. Any help or pointers would be greatly appreciated. Thanks!

<h3>Rowspan</h3>
<p-table  #dt [columns]="cols" [value]="empList" sortField="empName"  sortMode="single" (onSort)="onSort()">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" [pSortableColumn]="col.field">
                {{col.header}}
                <p-sortIcon [field]="col.field"></p-sortIcon>
            </th>
        </tr>
        <tr>
            <th *ngFor="let col of columns" [ngSwitch]="col.field">
                <input *ngSwitchCase="'empName'" pInputText type="text" (input)="dt.filter($event.target.value, col.field, col.filterMatchMode)">
                <input *ngSwitchCase="'empNbr'" pInputText type="text" (input)="dt.filter($event.target.value, col.field, col.filterMatchMode)">
                <input *ngSwitchCase="'empDept'" pInputText type="text" (input)="dt.filter($event.target.value, col.field, col.filterMatchMode)">
                <input *ngSwitchCase="'empHrs'" pInputText type="text" (input)="dt.filter($event.target.value, col.field, col.filterMatchMode)">
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
        <tr>
            <td *ngIf="rowGroupMetadata[rowData.empName].index === rowIndex" [attr.rowspan]="rowGroupMetadata[rowData.empName].size">
                {{rowData.empName}}
            </td>
            <td>{{rowData.empNbr}}</td>
            <td>{{rowData.empDept}}</td>
            <td>{{rowData.empHrs}}</td>
        </tr>
    </ng-template>
</p-table>

import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';
import {SelectItem} from 'primeng/api';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  empList: any = [];
  rowGroupMetadata: any;
  cols: any[];

  constructor() {}

  ngOnInit(): void {

    this.empList = [
      {empName:'John Smith', empNbr:1111, empDept:'Finance', empHrs:16},
      {empName:'John Smith', empNbr:1111, empDept:'Finance', empHrs:5},
      {empName:'John Smith', empNbr:1111, empDept:'Finance', empHrs:8},
      {empName:'Tom Smith', empNbr:2222, empDept:'Admin', empHrs:12},
      {empName:'Tom Smith', empNbr:2222, empDept:'Admin', empHrs: 10},
      {empName:'Bob Smith', empNbr:3333, empDept:'Marketing', empHrs: 8},
      {empName:'Bob Smith', empNbr:3333, empDept:'Marketing', empHrs: 12},
      {empName:'Bob Smith', empNbr:3333, empDept:'Marketing', empHrs: 20},
      {empName:'Bob Smith', empNbr:3333, empDept:'Marketing', empHrs: 22},
      {empName:'Mary Smith', empNbr:4444, empDept:'Sales', empHrs: 28},
    ];

    this.cols = [
      { field: 'empName', header: 'EmpName'},
      { field: 'empNbr', header: 'EmpNbr'},
      { field: 'empDept', header: 'EmpDept'},
      { field: 'empHrs', header: 'EmpHrs'}
    ];

    this.updateRowGroupMetaData();
  }

  onSort() {
    this.updateRowGroupMetaData();
  }

  updateRowGroupMetaData() {
    this.rowGroupMetadata = {};
    if (this.empList) {
        for (let i = 0; i < this.empList.length; i++) {
            let rowData = this.empList[i];
            let empName = rowData.empName;
            if (i == 0) {
                this.rowGroupMetadata[empName] = { index: 0, size: 1 };
            }
            else {
                let previousRowData = this.empList[i - 1];
                let previousRowGroup = previousRowData.empName;
                if (empName === previousRowGroup)
                    this.rowGroupMetadata[empName].size++;
                else
                    this.rowGroupMetadata[empName] = { index: i, size: 1 };
            }
        }
        console.log(this.rowGroupMetadata);
    }
  }

}

Answer 1

onFilter(event) {
   this.updateRowGroupMetaData(event.filteredValue);
}

updateRowGroupMetaData(data) {
        this.rowGroupMetadata = {};
        if (data) {
            for (let i = 0; i < data.length; i++) {
                let rowData = data[i];
                let brand = rowData.brand;
                if (i == 0) {
                    this.rowGroupMetadata[brand] = { index: 0, size: 1 };
                }
                else {
                    let previousRowData = this.cars[i - 1];
                    let previousRowGroup = previousRowData.brand;
                    if (brand === previousRowGroup)
                        this.rowGroupMetadata[brand].size++;
                    else
                        this.rowGroupMetadata[brand] = { index: i, size: 1 };
                }
            }
        }
    }

<p-table ... (onFilter)="onFilter($event)">

Reference: Click Here.

Answer 2

You can write custom filter. In your component side.