Components: Dynamic Columns in md table

[ghost]

Bug, feature request, or proposal:

I guess is a bug

What is the expected behavior?

1. Load columns definitions via httpService
2. Load data.
3. Show Data Table.
4. Be happy.
   

   What is the current behavior?

1.Load columns definitions via httpService.

1. Crash -> Error: cdk-table: Could not find column with id "FooColumn".
2. No Show Data Table.
3. Be sad and cry for two hours.

What are the steps to reproduce?

table.template.html

<md-table [dataSource]="dataSource"> <ng-container *ngFor="let attr of meta.attributes"> <ng-container [cdkColumnDef]="attr.name"> <md-header-cell *cdkHeaderCellDef >{{attr.label}}</md-header-cell> <md-cell *cdkCellDef="let row"> {{row[attr.name]}} </md-cell> </ng-container> </ng-container> <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row> <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row> </md-table>

table.component.ts
`
export class ProductosComponent implements OnInit {

displayedColumns = [];
private dataSource: ProductoDataSource | null;

meta: any = {
    attributes: []
};


constructor(private displayService: DisplayService) {
   }


ngOnInit() {
    this.displayService
        .ObtenerTabla("PRODUCTOS")
        .subscribe(meta => {
            meta.Columnas.forEach(x => {
                this.meta.attributes.push({ label: x.Nombre, name: x.Propiedad });
                this.displayedColumns.push(x.Nombre);
            });
            //this.dataSource = new ProductoDataSource(this.apiService);
        });
}

}
`

Is there anything else we should know?

I found this example
https://plnkr.co/edit/WKlClMq39ZOUBaQ7NhKx?p=preview
just add *ngIf="meta.attributes.length' for load the table when all is loaded,
but when I do this the table don't displayed.
Sorry for my english.
Thanks in Advance.

[andrewseguin]

Dynamic column definitions (using ngFor to stamp out column definitions) were added in #5545 and are not yet released. Plunker uses a build based off the latest master so that's why it works there.

To install the latest build, run this to install and save it to your npm package:

npm install --save angular/material2-builds angular/cdk-builds

[ghost]

@andrewseguin Thank you

[fnote]

<md-table #table [dataSource]="dataSource" mdSort>
        <ng-container *ngFor="let col of displayedColumns" cdkColumnDef={{col}}>
            <md-header-cell  *cdkHeaderCellDef md-sort-header> {{ col }}</md-header-cell>
            <md-cell  *cdkCellDef="let row"> {{row[col]}}</md-cell>
        </ng-container>

this is how i did it..

[wooddani]

Any additional documentation on how to get this working? neither @fnote 's comment nor the https://material.angular.io/components/table/examples seem to show how dynamic columns would work.

[andrewseguin]

There's no extra documentation yet, but if you have any specific questions feel free to ask them here. You should be able to dynamically change the column definitions as well as change the header and row's column inputs

[wooddani]

It appears that this will show the columns and all my rows, but row[col]
is undefined. I'm using the samples from the documentation. I suspect I need to setup displayedColumns as an object of some type to make this work, however what property (or name should I call it) will be shown in each row?

{{col}}
{{row[col]}}

I see this in your checkin. I could attempt to create a dynamicColumnDefs object
this.dynamicColumnDefs.push({
id: nextProperty.toUpperCase(),
property: nextProperty,
headerText: nextProperty
});

On Mon, Sep 11, 2017 at 12:28 PM, Andrew Seguin [e-mail]
wrote:

There's no extra documentation yet, but if you have any specific questions
feel free to ask them here. You should be able to dynamically change the
column definitions as well as change the header and row's column inputs

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/material2/issues/6159#issuecomment-328611321,
or mute the thread
https://github.com/notifications/unsubscribe-auth/APgcp_oOk0jmW_IL5MGQ2dCrWFmYW1qBks5shXdwgaJpZM4OnyvS
.

[willshowell]

@wooddani there's an open issue (https://github.com/angular/material2/issues/5927) for adding docs on this

Maybe https://github.com/angular/material2/issues/5927#issuecomment-317016960 will help you.

[romulof]

MatTable don't support empty rows and/or columns, which is my case right before an initial request is responded.

[mojtaba-ramezani]

@fnote tnx