Mat-table display rows depending on condition

Question

I only want to show data on the table if status == 'done'. I tried doing but what i did was just remove the status but it is still displaying the row. How to do this?

data

    { 
        equipmentOrdered: 'laptop', 
        qty: 1,
        status: 'processing', 
    },
    { 
        equipmentOrdered: desktop, 
        qty: 2,
        status: 'done', 
    },
    { 
        equipmentOrdered: 'keyboard', 
        qty: 2,
        status: 'processing', 
    },

table

      <ng-container matColumnDef="equipmentOrdered"> 
        <mat-header-cell *matHeaderCellDef mat-sort-header>Equipment Ordered</mat-header-cell>
        <mat-cell *matCellDef="let purchaseOrder">{{purchaseOrder.equipmentOrdered}}</mat-cell>
      </ng-container>

      <ng-container matColumnDef="qty"> 
        <mat-header-cell *matHeaderCellDef mat-sort-header>QTY</mat-header-cell>
        <mat-cell *matCellDef="let purchaseOrder">{{purchaseOrder.qty}}</mat-cell>
      </ng-container>

      //this is just not displaying the status, how to not include whole row?
      <ng-container matColumnDef="status"> 
        <mat-header-cell *matHeaderCellDef mat-sort-header>Status</mat-header-cell>
          <mat-cell *matCellDef="let purchaseOrder">
            <ng-container *ngIf="purchaseOrder.status !='done' ">
            {{purchaseOrder.status}}
          </ng-container>
          </mat-cell>
      </ng-container>


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

  </mat-table>

Answer 1

Yes, it won't conditionally hide it this way, because you are trying to tamper with it inside the mat-cell definition, not mat-row's.

I think the best way would be to filter the dataSource.

In your .ts:

// replace with the variable you pass to your mat-table's [dataSource]
this.dataSource = dataSourceArray.filter(row => row.status === 'done'); // returns array with only status === 'done'

Note: if your dataSource is not an ordinary array, but a MatTableDataSource instance, you should assign your filtered array to this.dataSource.data, not this.dataSource.

Another (a little less elegant, but closer to your original approach) way would be to hide your mat-row with the hidden attribute:

<mat-row *matRowDef="let row; columns: displayedColumns"
    [hidden]="row.status !== 'done'"></mat-row>