[Mat-Table] Feature Request : Add possibility to "hide" some columns directly in template

Bug, feature request, or proposal:

Possibility to hide some columns directly in template

What is the expected behavior?

Actually, I have a datable like this:

<mat-table #table [dataSource]="dataSource">
            <ng-container matColumnDef="col1">
                      <mat-header-cell *matHeaderCellDef>h1</mat-header-cell>
                      <mat-cell *matCellDef="let element">c1</mat-cell>
            </ng-container>
            <ng-container matColumnDef="col2">
                      <mat-header-cell *matHeaderCellDef>h2</mat-header-cell>
                      <mat-cell *matCellDef="let element">c2</mat-cell>
            </ng-container>
</mat-table>

I would like to have something like this (by exemple):

            <ng-container matColumnDef="col1" [matColumnDisplay]="expr">
                      <mat-header-cell *matHeaderCellDef>h1</mat-header-cell>
                      <mat-cell *matCellDef="let element">c1</mat-cell>
            </ng-container>

matColumnDisplay is a boolean expression to know if this column must be displayed or not (===> removed from the DOM)

or why not: <ng-container matColumnDef="col1" *ngIf="expr"> ==> but it causes an error

By exemple: [matColumnDisplay]="currentDisplay === 'mobile'" or [matColumnDisplay]="isColumnHidden === myVar"

What is the current behavior?

The only possible today is: add css class to <mat-header-cell> and <mat-cell> By exemple: <mat-header-cell class="d-none d-md-block"> ==> Work but, the element is not remove from the DOM and lots of css class to add.

Play with matHeaderRowDef and matRowDef and have several variables: const menuMobile = ['col1']; const menuDesktop = ['col1', 'col2', ...]; const menuInTheCaseOf = ['col1', 'col3', ...]; ==> Work but, add a lot of codes to manage several cases

What are the steps to reproduce?

What is the use-case or motivation for changing an existing behavior?

To have the simplest and shortest code to manage responsive case or fonctional case in columns display

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

5.2.x

Is there anything else we should know?

[willshowell]

I think the expected way to handle this is to update the columns passed to your row template:

<mat-row *matRowDef="let row; columns: getDisplayedColumns();"></mat-row>

const columnDefinitions = [
  { def: 'col1', showMobile: true },
  { def: 'col2', showMobile: false },
];
 
getDisplayedColumns(): string[] {
  const isMobile = this.currentDisplay === 'mobile';
  return this.columnDefinitions
    .filter(cd => !isMobile || cd.showMobile)
    .map(cd => cd.def);
}

[chitgoks]

this should be a very nice feature. sometimes we need to hide columns based on the screen width. such columns will not fit in mobile devices if there are too many of them.