[Table] Add example with dynamic columns

[rafaelss95]

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

[alexrun]

Is it possible to internationalize these dynamic columns implementation?

[pueaau]

I wonder what you refer to when you say "dynamic"? Many things regarding columns can be dynamic.
If your goal is to dynamically change which columns are shown then I think the simplest approach is to change displayedColumns.

[sophistyx]

I think he outlined it pretty well here:

//-----
What is the current behavior?
Currently all the examples are with hard coded columns, like this:
//-----

What he (and myself) are looking for is the ability to render an arbitrary number of columns with heading names taken from some underlying datasource, e.g. columns: ColumnDefinition[];

It has to be said that the current mechanism for binding md-table to a dataSource is dreadful. It should be consistent with how we *ngFor over collections to render results, only in this instance, stamp out column definitions. Same story for rows.

[eltimmo]

Hi @willshowell. Thanks, just looking at how you approached this. I'm not sure why but the Plunker you created has stopped working.

[willshowell]

@eltimmo updated the original comment!

[jscharett]

Can't seem to get this working in beta 12. Always get error that cdk-table can't find column with id.

Also, if I am using the MatTableModule, do I need to pull in the CdkTableModule?