Filter is not working in Angular Material editable table using FormArray

Question

I have created an angular mat-table using FormArray in angular. I have also applied filter and pagination.

But when I search for something it's not working properly.

Can someone please help me to make the filter work?

Below is the working demo project link

Project Link

table-basic-example.ts

export class TableBasicExample implements OnInit{
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
 dataSource = new MatTableDataSource<any>();

  VOForm: FormGroup;

  constructor(
    private fb: FormBuilder,
    private _formBuilder: FormBuilder){}

  ngOnInit(): void {
    this.VOForm = this._formBuilder.group({
      VORows: this._formBuilder.array([])
    });

     this.VOForm = this.fb.group({
              VORows: this.fb.array(ELEMENT_DATA.map(val => this.fb.group({
                position: new FormControl(val.position),
                name: new FormControl(val.name),
                weight: new FormControl(val.weight),
                symbol: new FormControl(val.symbol),
                action: new FormControl('existingRecord'),
                isEditable: new FormControl(false),
                isNewRow: new FormControl(false),
              })
              )) //end of fb array
            }); // end of form group cretation

    this.dataSource = new MatTableDataSource((this.VOForm.get('VORows') as FormArray).controls);
    this.dataSource.paginator = this.paginator;

    const filterPredicate = this.dataSource.filterPredicate;
      this.dataSource.filterPredicate = (data: AbstractControl, filter) => {
        return filterPredicate.call(this.dataSource, data.value, filter);
      }
  }

  @ViewChild(MatPaginator) paginator: MatPaginator;

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
  }
  
   applyFilter(event: Event) {
     debugger;
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
}

table-basic-example.html

<div class="mat-elevation-z8">
<mat-form-field>
  <mat-label>Filter</mat-label>
  <input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium" #input>
</mat-form-field>

<form [formGroup]="VOForm" autocomplete="off">
    <ng-container formArrayName="VORows">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element; let i = index" [formGroup]="element"> 
      {{VOForm.get('VORows').value[i].position}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element; let i = index" [formGroup]="element"> 
      <span [hidden]="VOForm.get('VORows').value[i].isEditable">
        {{VOForm.get('VORows').value[i].name}}
      </span>
      <mat-form-field style="width: 50px;"
        [hidden]="!VOForm.get('VORows').value[i].isEditable">
        <input matInput type="text" formControlName="name">
      </mat-form-field>
    </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef> Weight </th>
    <td mat-cell *matCellDef="let element; let i = index" [formGroup]="element"> 
      <span [hidden]="VOForm.get('VORows').value[i].isEditable">
        {{VOForm.get('VORows').value[i].weight}}
      </span>
      <mat-form-field style="width: 50px;"
        [hidden]="!VOForm.get('VORows').value[i].isEditable">
        <input matInput type="text" formControlName="weight">
      </mat-form-field>
    </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef="let element; let i = index"[formGroup]="element">
      <span [hidden]="VOForm.get('VORows').value[i].isEditable">
        {{VOForm.get('VORows').value[i].symbol}}
      </span>
      <mat-form-field style="width: 50px;"
        [hidden]="!VOForm.get('VORows').value[i].isEditable">
        <input matInput type="text" formControlName="symbol">
      </mat-form-field>

    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

  <!-- Row shown when there is no matching data. -->
  <tr class="mat-row" *matNoDataRow>
    <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
  </tr>
</table>
                </ng-container>
</form>
  <mat-paginator [pageSizeOptions]="[5, dataSource.data.length>8? dataSource.data.length:''  ]" showFirstLastButtons></mat-paginator>
</div>

Edit-1:

Currently, it showing when you search 'Neon'

It Should show Like Below:

Thanks in advance.

Answer 1

After a lot of searches, I have created the filter work in the angular mat table.

Following functionality, I have added into the mat-table with FormArray example:

1. Filter
2. Go to a specific page.
3. In place editing into mat table.
4. Add New Row.
5. Edit the existing row.
6. Delete the row.

Here is the link of the project Project-Link-Mat-Table