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

[ghost]

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

[ghost]

Yes today it s a solution like I said.
But it's really a lot of code only to do a simple "if"...

And If I want to have a button with (click)="action = true" and [matColumnDisplay]="action", I can't do it directly.
I must customize the columnDefinitions and your method getDisplayedColumns once more?
I don't say it doesn' work, but it's too complicated only to hide/show a column specificly.

[Eddygn]

Currently when a column is in the displaylist but the 'matColumnDef' block is missing there is an error thrown, maybe if instead of the error it will just ignore it, then perhaps the column definition can be just '*ngIf'ed?
Or it will cause template scope issues?

[andrewseguin]

The mechanism to change which columns are displayed and their order is by providing that array of column IDs. I don't think we'll support a secondary way to show/hide columns since it'll be confusing from an interface perspective. I agree that the expression approach would be nice for your use case

[oleersoy]

https://medium.com/@ole.ersoy/hiding-angular-material-data-table-columns-f8bdd5d62abd

[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.