Dynamic Mat-tab with Mat-table filter on nested object

Question

I've a dynamic mat-tab that have a nested object on a mat-table within each tab. I want to implement a filter on each mat-table within the tab. How do I do that? The datasource for the mat-table is within the tab nested object.

Here is the HTML :

<div class="container-inside">
    <mat-card>
        <mat-card-header>
        <mat-card-title><strong>Warehouse Inventory</strong></mat-card-title>
        </mat-card-header>
        <mat-card-content>
        <mat-tab-group>
        <mat-tab *ngFor="let wh of whouses; let i = index" [label]="wh.description">
        <div class="inv-content">
            <div>&nbsp;</div>
            <div>
                <button class="float-right" mat-icon-button (click)="addInventory({loc_code: wh.loc_code, desc: wh.description})"><mat-icon>add</mat-icon></button><button class="float-right" mat-icon-button (click)="refreshData()"><mat-icon>refresh</mat-icon></button>
            </div>
            <div>&nbsp;</div>
            <mat-form-field appearance="fill" class="input-filter">
                <mat-label>Filter</mat-label>
                <input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium" #input>
            </mat-form-field>
            <div>
            <table mat-table [dataSource]="wh.inv" class="mat-elevation-z8">
                <ng-container matColumnDef="category">
                <th mat-header-cell *matHeaderCellDef> Category</th>
                <td mat-cell *matCellDef="let element"> {{element.category}} </td>
                </ng-container>
                
                <ng-container matColumnDef="loc_code">
                <th mat-header-cell *matHeaderCellDef> WH Code</th>
                <td mat-cell *matCellDef="let element"> {{element.loc_code}} </td>
                </ng-container>
                
                <ng-container matColumnDef="project_no">
                <th mat-header-cell *matHeaderCellDef> Project No.</th>
                <td mat-cell *matCellDef="let element"> {{element.project_no}} </td>
                </ng-container>

                <ng-container matColumnDef="item_code">
                <th mat-header-cell *matHeaderCellDef> Item Code </th>
                <td mat-cell *matCellDef="let element"> {{element.item_code}} </td>
                </ng-container>

                <ng-container matColumnDef="item">
                <th mat-header-cell *matHeaderCellDef> Item </th>
                <td mat-cell *matCellDef="let element"> {{element.item}} </td>
                </ng-container>

                <ng-container matColumnDef="qty">
                <th mat-header-cell *matHeaderCellDef> Quantity </th>
                <td mat-cell *matCellDef="let element"> {{element.qty}} </td>
                </ng-container>

                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            </table>                    
            </div>
        </div>
        </mat-tab>
        </mat-tab-group>
        </mat-card-content>
    </mat-card>
</div>