CODEWITHSUNDEEP
angularangular-materialangular-material-table
Bjorno
Bjorno

Reputation: 321

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

I am getting an error using Angular Material's table component. I have seen this question before here, but I am still getting the error even after doing what was suggested as a fix.

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

This is my HTML code for the table:

<table mat-table [dataSource]="customers" class="mat-elevation-z8">

        <!-- Position Column -->
        <ng-container matColumnDef="Name">
          <th mat-header-cell *matHeaderCellDef> Name </th>
          <td mat-cell *matCellDef="let customer"> {{ customer?.name }} </td>
        </ng-container>

        <!-- Name Column -->
        <ng-container matColumnDef="Email">
          <th mat-header-cell *matHeaderCellDef> Email </th>
          <td mat-cell *matCellDef="let customer"> {{ customer?.email }} </td>
        </ng-container>

        <!-- Weight Column -->
        <ng-container matColumnDef="Phone number">
          <th mat-header-cell *matHeaderCellDef> Phone number </th>
          <td mat-cell *matCellDef="let customer"> {{ customer?.phone.number }} </td>
        </ng-container>

        <!-- Symbol Column -->
        <ng-container matColumnDef="Notes">
          <th mat-header-cell *matHeaderCellDef> Notes </th>
          <td mat-cell *matCellDef="let customer"> {{ customer?.notes }} </td>
        </ng-container>

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

Here is my component TypeScript file:

import { Component, OnInit } from '@angular/core';
import { Customer } from '../customers.types';
import { Router, ActivatedRoute } from '@angular/router';
import { CustomersService } from '../customers.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-customers-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss']
})
export class CustomersListComponent implements OnInit {
  customersSub: Subscription;
  detailsSub: Subscription;
  displayedColumns: string[] = [ 'Name', 'Email', 'Phone number', 'Notes' ];
  customers: Customer[] = [];
  customersLength: number;
  loadingMode: boolean = false;
  openDetailsDrawer: boolean = false;
  detailsId: string;

  constructor(private _router: Router,
              private _route: ActivatedRoute,
              public _customersService: CustomersService) { }

  ngOnInit(): void {
      this.loadingMode = true;
      this._route.queryParams.subscribe(params =>{
          this.detailsId = this._route.snapshot.params['id'];
      });

      this._customersService.getCustomers();
      this.customersSub = this._customersService.getCustomersUpdateListener()
          .subscribe((customers: Customer[]) => {
              this.loadingMode = false;
              this.customers = customers;
              this.customersLength = customers.length;
      });

      this.detailsSub = this._customersService.getDetailsUpdateListener()
          .subscribe((bool: boolean) => {
              this.openDetailsDrawer = bool;
      });
  }

  ngOnDestroy(): void {
      this.detailsSub.unsubscribe()
  }

  onOpenDetails(_id: string) {
      this._customersService.openDetails(_id);
  }

  onOpenCreate() {
      this._customersService.openCreate();
  }

}

Upvotes: 1

Views: 2425

Answers (2)

Bjorno
Bjorno

Reputation: 321

I got it working, not quite sure how or why. I restarted the client, which is something I have done several times without success. This time it made a difference though. I did not change any of the code. Now it works perfectly, with a static array of objects or with an observable.

Upvotes: 0

Juan Antonio
Juan Antonio

Reputation: 2614

You need to specify columns array in your template, like this:

template file

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

and the controller file

displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];

Take a look to the all files in the examples: https://material.angular.io/components/table/examples

Upvotes: 1

Related Questions