CODEWITHSUNDEEP
angularangular-material
Sinan Samet
Sinan Samet

Reputation: 6742

Getting the error: Could not find column with id "id"

I'm trying to fill a mat-table with data but I get the error: Could not find column with id "id" when I try to do so.

This is how I've done it in my component file:

    export class ListAllTrucksComponent {
      displayedColumns: string[] = ['id', 'plate', 'status', 'type'];
      orders: Order[] = [];
      dataSource: MatTableDataSource<Order>;
    
      constructor(private orderService: OrderService) {
        orderService.getAll().subscribe((orders) => {
          for (const order of orders) {
            const newOrder = new Order(order[0], order[1], order[2], order[3]);
            this.orders.push(newOrder);
          }
          console.log(this.orders);
          this.dataSource = new MatTableDataSource<Order>(this.orders);
        });
      }
    
      applyFilter(filterValue: string) {
        this.dataSource.filter = filterValue.trim().toLowerCase();
      }
    }

And this is my html which I basically copied from the example:

    <main>
      <div id="content">
        <mat-form-field>
          <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
        </mat-form-field>
    
        <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    
          <!-- Position Column -->
          <ng-container matColumnDef="position">
            <th mat-header-cell *matHeaderCellDef> No. </th>
            <td mat-cell *matCellDef="let element"> {{element.id}} </td>
          </ng-container>
    
          <!-- Name Column -->
          <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef> Name </th>
            <td mat-cell *matCellDef="let element"> {{element.plate}} </td>
          </ng-container>
    
          <!-- Weight Column -->
          <ng-container matColumnDef="weight">
            <th mat-header-cell *matHeaderCellDef> Weight </th>
            <td mat-cell *matCellDef="let element"> {{element.status}} </td>
          </ng-container>
    
          <!-- Symbol Column -->
          <ng-container matColumnDef="symbol">
            <th mat-header-cell *matHeaderCellDef> Symbol </th>
            <td mat-cell *matCellDef="let element"> {{element.type}} </td>
          </ng-container>
    
          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
      </div>
    </main>

When I console.log orders it returns this:

enter image description here

Upvotes: 37

Views: 68567

Answers (2)

Calsal
Calsal

Reputation: 1485

I got the same error even though I copied the example from Material docs. I kept getting error Could not find column with id "position" from that example. I just realised the issue was the imports. I imported many components and definitions (eg. MatCellDef, MatColumnDef, MatHeaderRow) because my IDE suggested it. But a few imports was missing and the result was that error message.

The easy solution is to import the MatTableModule instead.

imports: [
    CommonModule,
    MatTableModule, // MatTableModule is imported here
    MatSortModule,
    BrowserAnimationsModule,
],

Upvotes: 2

rcanpahali
rcanpahali

Reputation: 2643

Your definition is wrong for matColumnDef="" property. See the example below,

    <!-- Position Column -->
    <ng-container matColumnDef="position"> <!--matColumnDef PROPERTY IS "position" HERE. -->
        <th mat-header-cell *matHeaderCellDef> No. </th>
        <td mat-cell *matCellDef="let element"> {{element.position}} </td> <!--AND "position" IS ALSO USED HERE.-->
    </ng-container>

So your code needs to be like this:

    <main>
      <div id="content">
        <mat-form-field>
          <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
        </mat-form-field>
    
        <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

          <!-- Position Column -->
          <ng-container matColumnDef="id">
            <th mat-header-cell *matHeaderCellDef> No. </th>
            <td mat-cell *matCellDef="let element"> {{element.id}} </td>
          </ng-container>
    
          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
      </div>
    </main>

Upvotes: 56

Related Questions