CODEWITHSUNDEEP
angularheaderangular9mat-table
satish
satish

Reputation: 943

Why does "mat-table" report "Missing definitions for header, footer, and row; cannot determine which columns should be rendered"?

I want to create a mat-table in my Angular 9 app. I've tried to simplify things. My .ts file is

export class LatestComponent implements OnInit {

  dataSource: MatTableDataSource<item>;

  constructor(
    private apiService: ApiService
  ) { }

  ngOnInit(): void {
    this.apiService.getLatest().subscribe(items => {
      console.log(items[0]);
      this.dataSource = new MatTableDataSource(items);
    });
  }

}

and my simple one-column table is ...

<mat-table #table [dataSource]="dataSource">
    <ng-container matColumnDef="title">
      <mat-header-cell *matHeaderCellDef> item </mat-header-cell>
      <mat-cell *matCellDef="let item">{{ item.title }}</mat-cell>
    </ng-container>
</mat-table>

I have verified that there is a "title" attribute in each object taht comes back from my observer. Yet I still get the below error

ERROR Error: Missing definitions for header, footer, and row; cannot determine which columns should be rendered.
    Angular 27
    RxJS 5
    Angular 9

What do I need to add to get my table to render?

Upvotes: 0

Views: 1568

Answers (1)

Kishan
Kishan

Reputation: 935

You need to specify the row (<mat-header-row> and <mat-row>) definitions:

<mat-table #table [dataSource]="dataSource">
  <ng-container matColumnDef="title">
    <mat-header-cell *matHeaderCellDef> item </mat-header-cell>
    <mat-cell *matCellDef="let item">{{ item.title }}</mat-cell>
  </ng-container>

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

And also define which columns should be displayed (the displayedColumns variable):

export class LatestComponent implements OnInit {

  dataSource: MatTableDataSource<item>;
  displayedColumns: string[] = ['title']

  constructor(
    private apiService: ApiService
  ) { }

  ngOnInit(): void {
    this.apiService.getLatest().subscribe(items => {
      console.log(items[0]);
      this.dataSource = new MatTableDataSource(items);
    });
  }

}

Upvotes: 2

Related Questions