title: Getting the error: Could not find column with id "id"
body: <p>I'm trying to fill a mat-table with data but I get the error: <code>Could not find column with id &quot;id&quot;</code> when I try to do so.</p>
  <p>This is how I've done it in my component file:</p>
  <pre class="lang-js prettyprint-override"><code>    export class ListAllTrucksComponent {
        displayedColumns: string[] = ['id', 'plate', 'status', 'type'];
        orders: Order[] = [];
        dataSource: MatTableDataSource&lt;Order&gt;;
      
        constructor(private orderService: OrderService) {
          orderService.getAll().subscribe((orders) =&gt; {
            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&lt;Order&gt;(this.orders);
          });
        }
      
        applyFilter(filterValue: string) {
          this.dataSource.filter = filterValue.trim().toLowerCase();
        }
      }
  </code></pre>
  <p>And this is my html which I basically copied from the example:</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;main&gt;
        &lt;div id=&quot;content&quot;&gt;
          &lt;mat-form-field&gt;
            &lt;input matInput (keyup)=&quot;applyFilter($event.target.value)&quot; placeholder=&quot;Filter&quot;&gt;
          &lt;/mat-form-field&gt;
      
          &lt;table mat-table [dataSource]=&quot;dataSource&quot; class=&quot;mat-elevation-z8&quot;&gt;
      
            &lt;!-- Position Column --&gt;
            &lt;ng-container matColumnDef=&quot;position&quot;&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt; No. &lt;/th&gt;
              &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.id}} &lt;/td&gt;
            &lt;/ng-container&gt;
      
            &lt;!-- Name Column --&gt;
            &lt;ng-container matColumnDef=&quot;name&quot;&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt; Name &lt;/th&gt;
              &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.plate}} &lt;/td&gt;
            &lt;/ng-container&gt;
      
            &lt;!-- Weight Column --&gt;
            &lt;ng-container matColumnDef=&quot;weight&quot;&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt; Weight &lt;/th&gt;
              &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.status}} &lt;/td&gt;
            &lt;/ng-container&gt;
      
            &lt;!-- Symbol Column --&gt;
            &lt;ng-container matColumnDef=&quot;symbol&quot;&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt; Symbol &lt;/th&gt;
              &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.type}} &lt;/td&gt;
            &lt;/ng-container&gt;
      
            &lt;tr mat-header-row *matHeaderRowDef=&quot;displayedColumns&quot;&gt;&lt;/tr&gt;
            &lt;tr mat-row *matRowDef=&quot;let row; columns: displayedColumns;&quot;&gt;&lt;/tr&gt;
          &lt;/table&gt;
        &lt;/div&gt;
      &lt;/main&gt;
  </code></pre>
  <p>When I console.log <code>orders</code> it returns this:</p>
  <p><a href="https://i.stack.imgur.com/1N8Gi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1N8Gi.png" alt="enter image description here" /></a></p>