How to display only few columns based on condition in mat-table using angular 6?

Question

I have a mat table which is having few columns. Here for one condition I need to hide two columns. For normal table, we would use simple ngIf condition. But for this mat-table that seems to be not working. I have tried this,

   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);
    }

My HTML:

       <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>
            <ng-container matColumnDef="E Type">
                <th mat-header-cell *matHeaderCellDef> E Type <br>
                </th>
                <td mat-cell *matCellDef="let element"> {{ etype }} </td>
            </ng-container>
            <ng-container matColumnDef="Approve">
                <th mat-header-cell *matHeaderCellDef> Approve <br>
                </th>
                <td mat-cell *matCellDef="let element"> {{ Approve}} </td>
            </ng-container>
            <ng-container matColumnDef="Transfer">
                <th mat-header-cell *matHeaderCellDef> Transfer <br>
                </th>
                <td mat-cell *matCellDef="let element"> {{ Transfer }} </td>
            </ng-container>
       <tr mat-header-row *matHeaderRowDef="getDisplayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: getDisplayedColumns;"> 
       </tr>     
        </tbody>
     </table>

But it gives ERROR TypeError: Cannot read property 'diff' of undefined error. Can anybody please suggest me how can I do that in mat-table ?

I see nothing in your code that is called diff or even dif. If you have an error about diff you should include the code that causes the error. — Igor
– Igor, Commented Mar 14, 2019 at 18:09
@Igor yes i dnt have anything called diff in my code also. Or could you please suggest me how to display few columns, based on some condition? — sasi
– sasi, Commented Mar 14, 2019 at 18:11
I guess, the source of this error were the missing parentheses at <tr mat-header-row *matHeaderRowDef="getDisplayedColumns"> instead of <tr mat-header-row *matHeaderRowDef="getDisplayedColumns()"> (and in the line below) — Datz
– Datz, Commented Jul 19, 2021 at 6:33

Igor · Accepted Answer · 2019-03-14 18:30:11Z

3

Your issue is that your column name array is mixing a custom object with strings and your filter is not taking that into consideration.

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'] !== false)
    .map(cd => typeof cd === 'string' ? cd : cd.def);
}

answered Mar 14, 2019 at 18:30

Igor

62.5k10 gold badges111 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sasi Over a year ago

thanks for your time & answer, Im not getting any error. But still that two columns are not hidiing.. could you help please?

Molly · Accepted Answer · 2023-04-04 15:01:46Z

2

displayedColumns: any[]
if (this.entityRole == 'Admin')
   { this.displayedColumns = ['name', 'dob', 'grade', 'address'] }
else
   { this.displayedColumns = ['name', 'dob', 'grade']  }

edited Apr 4, 2023 at 15:01

answered Apr 4, 2023 at 15:01

Molly

212 bronze badges

Collectives™ on Stack Overflow

How to display only few columns based on condition in mat-table using angular 6?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related