Currently, I am facing an issue with my mat table as it contains several columns. In a specific scenario, I need to hide two of these columns. Typically, for a regular table, we would use a simple ngIf condition to achieve this. However, in the case of this mat-table, that approach does not seem to work. Here is what I have tried:
displayedColumns1: any[] = [
'Ref No', 'E Type',
{ def: 'Approve', showMobile: true },
{ def: 'Transfer', showMobile: false },
];
getDisplayedColumns(): string[] {
const isMobile = this.entityRole === 'Admin';
return this.displayedColumns1
.filter(cd => !isMobile || cd.showMobile)
.map(cd => cd.def);
}
Below is the relevant HTML code snippet:
<table mat-table [dataSource]="dataSource" class="">
<tbody>
<ng-container matColumnDef="Ref No">
<th mat-header-cell *matHeaderCellDef> Ref No <br></th>
<td mat-cell *matCellDef="let element"> {{ ref }} </td>
</ng-container>
<!-- Other column definitions go here -->
<tr mat-header-row *matHeaderRowDef="getDisplayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: getDisplayedColumns;"></tr>
</tbody>
</table>
Unfortunately, I encountered an ERROR TypeError: Cannot read property 'diff' of undefined. Can someone please assist me in resolving this issue while using mat-table?