title: Angular Mat Table Error: Missing definitions for header and row
body: <p>I am using MatTable from Angular Material 5.2.5. I trying to populate the table with data which is got through a server request.</p>
  
  <p>The UI</p>
  
  <pre><code>  &lt;mat-table [dataSource]="dataSource"&gt;
      &lt;ng-container matColumnDef="number"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt;#&lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let i = index"&gt;{{i + 1}}&lt;/mat-cell&gt;
      &lt;/ng-container&gt;
      &lt;ng-container matColumnDef="name"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt;Name&lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let user"&gt;{{user.userName}}&lt;/mat-cell&gt;
      &lt;/ng-container&gt;
      ...
    &lt;/mat-table&gt;
  </code></pre>
  
  <p>The component code</p>
  
  <pre><code>  public dataSource = new MatTableDataSource&lt;User&gt;()
    public displayedColumns = ['number', 'name', 'email', 'phone', 'joiningDate']
  </code></pre>
  
  <p>Adding data to dataSource on receiving data from the server</p>
  
  <pre><code> onGettingPartnerUsers(userList: User[]) {
    console.log('userList', userList)
    if (!Util.isFilledArray(userList)) {
      // TODO show message no user found
    } else {
      this.dataSource.data = userList
    }
   }
  </code></pre>
  
  <p>I am getting the list of users. But this error is getting thrown.</p>
  
  <pre><code>Error: Missing definitions for header and row, cannot determine which columns should be rendered.
  </code></pre>
  
  <p>What is the mistake?</p>
  
  <p>PS: I am following <a href="https://medium.com/codingthesmartway-com-blog/angular-material-part-4-data-table-23874582f23a" rel="noreferrer">this</a> blog on using MatTable</p>