title: MatTable - Angular Material: Could not find column with id
body: <p>I'm trying to display a table "programmatically": </p>
  
  <pre><code>&lt;div [formArrayName]="doc.typeSelector"&gt;
                    {{ doc.typeSelector }}
  &lt;/div&gt;
  &lt;div *ngIf="documents[doc.typeSelector]"&gt;
       &lt;mat-table
        [dataSource]="documents[doc.typeSelector]"
        *ngFor="let col of docColumns"&gt;
        &lt;ng-container [matColumnDef]="col"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; {{ col | uppercase }} &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{ element[col] }} &lt;/td&gt;
        &lt;/ng-container&gt;
      &lt;tr mat-header-row *matHeaderRowDef="docColumns"&gt;&lt;/tr&gt;
      &lt;tr mat-row *matRowDef="let row; columns: docColumns;"&gt;&lt;/tr&gt;
    &lt;/mat-table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Where: </p>
  
  <pre><code>documents: object = {};
  docColumns: string[] = ["name", "uploadDate", "uri", "comments"];
  docs = [];
  docForm: FormGroup;
  docTypes: object = {
      fs: 'Financial Statements',
      id: 'Identity Document',
      ad: 'Bank Account Details',
      cd: 'Constitutional Document',
      pd: 'Power Document',
    };
  </code></pre>
  
  <p>and where the <code>documents / docs / docFrom</code> variables are being populated with <code>ngOnInit()</code> :</p>
  
  <pre><code>[...] this.docForm = this.fb.group({});
      Object.keys(this.docTypes).map(
        type =&gt; {
          this.docForm.addControl(type, this.fb.array([]));
          this.docs.push({
           typeName: this.docTypes[type],
           typeSelector: type
          });
      }
    );
  </code></pre>
  
  <p>Then if there's a customer, a subscription gets the data from the database...
  and once we get the information it gets aggregated in the variables: </p>
  
  <pre><code>// Info for the docForm:
                const cusDocs = this.customer.docRefs;
                Object.keys(cusDocs).map(docType =&gt; {
                  const currDocs = [];
                  cusDocs[docType].forEach(doc =&gt; {
                    currDocs.push(this.customerService.createNewDoc(doc));
                  });
                  const matchForm = this.docForm.get(docType) as FormArray;
                  currDocs.forEach(form =&gt; {
                    matchForm.push(form);
                  });
                });
                Object.keys(this.docForm.value).map(docType =&gt; {
                  const currForm = this.docForm.get(docType) as FormArray;
                  if (currForm.value.length &gt; 0) {
                    Object.keys(currForm.value).map(doc =&gt; {
                      const currentDoc = currForm.at(+doc).value;
                      const newDocRow = {
                        name: currentDoc.name,
                        uploadDate: currentDoc.uploadDate,
                        uri: currentDoc.uri,
                        comments: currentDoc.comment
                      };
                      if (!this.documents[docType]) {
                        this.documents[docType] = [];
                      }
                      this.documents[docType].push(newDocRow);
                      console.log(this.documents[docType]);
                    });
                  }
                });
                console.log(this.documents);
                console.log(this.docColumns);
  </code></pre>
  
  <ul>
  <li>The <code>docs array</code> is used by the DOM to display an expansion-panel</li>
  <li>The <code>docTypes object</code> is used to build the previous variable, matching the response from the server. Might be useless but at the time I built this, I wanted to make sure that the server information matched the DOM... </li>
  <li><code>docForm</code> is a <code>FormGroup</code> holding the 5 different documents type that can be uploaded.</li>
  <li><code>docColumns</code> are the displayedColumns set in advance.</li>
  <li>Last but not least, <code>documents</code> is the <code>array</code> of <code>object</code> used to define the rows.</li>
  </ul>
  
  <p>Here's what the <code>console.logs</code> yield: 
  <a href="https://i.stack.imgur.com/8rr7E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8rr7E.png" alt="Logs + error"></a></p>
  
  <p>I've seen similar questions but I'm not sure that my error fits these cases...
  Thanks in advance!</p>
  
  <p>EDIT ----------------------
  EDIT: Olipej's answer didn't seem to solve my issue or I'm having trouble understand where my error comes from.</p>
  
  <p>I made a stackblitz reproducing my data structure and the error I'm getting:
  <a href="https://stackblitz.com/edit/mat-table-error-example" rel="nofollow noreferrer">https://stackblitz.com/edit/mat-table-error-example</a></p>
  
  <p>Stackblitz screenshots: 
  <a href="https://i.stack.imgur.com/qydYq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qydYq.png" alt="enter image description here"></a></p>