Missing definitions for header, footer, and row; cannot determine which columns should be rendered - Angular Material Table

Question

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?

All of the table examples on the [material site](https://material.angular.io/components/table/examples) include a `mat-header-row` and `mat-row`. You have neither. — R. Richards, Mar 27 '20 at 16:09
@R.Richards, the "examples" are _just_ renderings. Where in the Laniakea Supercluster are the _code examples_? The Material docs are pretty pathetic on the matter. A first-time user is not going to know _how_ magical the mat-table is or isn't. — Cody, Aug 24 '20 at 21:47
@Cody all of the "examples" at the link I cite have a link to the code in StackBIitz, and a view code link as well. Upper right hand corner of each example. Where the `< >` icon is. — R. Richards, Aug 25 '20 at 01:41

score 17 · Accepted Answer · answered Mar 27 '20 at 16:10

17

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>

answered Mar 27 '20 at 16:10

vargaadam

411
5
18

programoholic · Answer 2 · 2020-03-27T16:17:09.150

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

score 1 · Answer 3 · answered Jun 16 '22 at 14:41

Make sure you place the tags right above `table`

Make sure that

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

and

<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

is right above table element.

This will work:

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

This will NOT work:

<table mat-table [dataSource]="devizas" class="mat-elevation-z8">
  <div>
   ....

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </div>
</table>

Missing definitions for header, footer, and row; cannot determine which columns should be rendered - Angular Material Table

3 Answers3

Make sure you place the tags right above table

Make sure you place the tags right above `table`