[Table] Add example with dynamic columns

Bug, feature request, or proposal:

Proposal

What is the expected behavior?

It’d be nice to have example(s) on how to use md-table with dynamic columns.

What is the current behavior?

Currently all the examples are with hard coded columns, like this:

<!-- ID Column -->
<ng-container cdkColumnDef="userId">
  <md-header-cell *cdkHeaderCellDef md-sort-header> ID </md-header-cell>
  <md-cell *cdkCellDef="let row"> {{row.id}} </md-cell>
</ng-container>

<!-- Progress Column -->
<ng-container cdkColumnDef="progress">
  <md-header-cell *cdkHeaderCellDef md-sort-header> Progress </md-header-cell>
  <md-cell *cdkCellDef="let row"> {{row.progress}}% </md-cell>
</ng-container>

@andrewseguin

[willshowell]

For those interested, here was my approach

https://plnkr.co/edit/UntMipJO7lQVFCCSq3sZ?p=preview

<!-- Generic column definition -->
<ng-container *ngFor="let column of columns" [cdkColumnDef]="column.columnDef">
  <md-header-cell *cdkHeaderCellDef>{{ column.header }}</md-header-cell>
  <md-cell *cdkCellDef="let row">{{ column.cell(row) }}</md-cell>
</ng-container>

/** Table columns */
columns = [
  { columnDef: 'userId',    header: 'ID',       cell: (row: UserData) => `${row.id}`        },
  { columnDef: 'userName',  header: 'Name',     cell: (row: UserData) => `${row.name}`      },
  { columnDef: 'progress',  header: 'Progress', cell: (row: UserData) => `${row.progress}%` }
];

/** Column definitions in order */
displayedColumns = this.columns.map(x => x.columnDef);

EDIT: Here is a (hopefully) evergreen stackblitz with the exact same approach

https://stackblitz.com/edit/material2-beta11-vmwjpe

[DaDave]

This should work: <div *ngFor="let displayedColumn of displayedColumns; let columnIndex = index"> <ng-container *ngIf="displayedColumn !='actions'" matColumnDef="{{displayedColumn}}"> <mat-header-cell *matHeaderCellDef mat-sort-header>{{displayedColumn}}</mat-header-cell> <mat-cell *matCellDef="let element "> {{element[displayedColumn]}}</mat-cell> </ng-container> </div> <ng-container matColumnDef="actions"> <mat-header-cell *matHeaderCellDef >Actions</mat-header-cell> <mat-cell *matCellDef="let element "> <button mat-raised-button> Edit </button> </mat-cell> </ng-container>