Missing definitions for header, footer, and row; cannot determine which columns should be rendered - Angular Material Table
Solution 1
Try this!
<table mat-table [dataSource]="devizas" class="mat-elevation-z8">
....
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
Solution 2
You are missing below line in html
code :
<tr mat-header-row *matHeaderRowDef="columndefs"></tr>
<tr mat-row *matRowDef="let row; columns: columndefs;"></tr>
-
create an array with column definitions as below in component.ts file :
columndefs : any[] = ['name','code'];
Update table code as below :
<table mat-table [dataSource]="devizas" class="mat-elevation-z8">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let element"> {{ element.name }} </td>
</ng-container>
<ng-container matColumnDef="code">
<th mat-header-cell *matHeaderCellDef>Code</th>
<td mat-cell *matCellDef="let element"> {{ element.code }} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columndefs"></tr>
<tr mat-row *matRowDef="let row; columns: columndefs;"></tr>
</table>
Here is the demo : demo
netdjw
Building applications with Laravel & Angular & building websites in perl, PHP, Laravel and MySql with HTML5, CSS3 and jQuery, Vue. I'm teaching young people to the basics of webdevelopment, and help them to evolve in their career. With my 4 friends we found a company in Salgotarjan. It is a disadvantaged city in Hungary, EU. We employee these young people, they earn money while they are learning, and they learning by doing, so they work actually under senior webdeveloper's wings.
Updated on June 21, 2022Comments
-
netdjw almost 2 years
I'm using Angular 9.0.4 with @angular/material 9.1.3 and I want to show a basic material table:
<table mat-table [dataSource]="devizas" class="mat-elevation-z8"> <!-- name --> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef>Name</th> <td mat-cell *matCellDef="let element"> {{ element.name }} </td> </ng-container> <!-- code --> <ng-container matColumnDef="code"> <th mat-header-cell *matHeaderCellDef>Code</th> <td mat-cell *matCellDef="let element"> {{ element.code }} </td> </ng-container> </table>
I imported in my app.module.ts this:
import { MatTableModule } from '@angular/material/table'; @NgModule({ imports: [ MatTableModule, ], })
In my component.ts:
export class DevizaListComponent implements OnInit { devizas: DevizaInterface[] = [ { name: 'dollar', code: 'USD' , } ]; constructor() { } ngOnInit() { } }
Now I get this error message in the browser:
Error: Missing definitions for header, footer, and row; cannot determine which columns should be rendered. at getTableMissingRowDefsError (table.js:996) at MatTable.push../node_modules/@angular/cdk/ivy_ngcc/fesm5/table.js.CdkTable.ngAfterContentChecked (table.js:1296)
The official documentation says nothing relevant. Any idea?