title: mat-table creating columns dynamically vs static change table look
body: <p>Sorry if this question is trivial, I'm very new to Angular and Web UI Kingdom</p>
  
  <p>I'm currently looking at this sample project: <a href="https://github.com/marinantonio/angular-mat-table-crud" rel="nofollow noreferrer">https://github.com/marinantonio/angular-mat-table-crud</a></p>
  
  <p>I was replacing the way the columns were created (from static to dynamic) and the table layout changed into something that is hard to read. I am having trouble understanding how/why this is happening. What makes the difference in how I created my columns? But, most importantly, how do i fix it? </p>
  
  <p><strong>Here is what I have:</strong> </p>
  
  <p><strong>componnent.html:</strong></p>
  
  <pre><code>&lt;ng-container *ngFor="let column of columns" matColumnDef="{{column.name}}"&gt;
    &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;{{column.label}}&lt;/th&gt;
    &lt;td mat-cell *matCellDef="let row"&gt; {{row[column.name]}} &lt;/td&gt;
  &lt;/ng-container&gt;
  </code></pre>
  
  <p><strong>component.ts</strong></p>
  
  <pre><code>columns: Array&lt;any&gt; = [
      { name: 'id',         label: 'ID',         cell: (element: any) =&gt; `${element.id}` },
      { name: 'title',      label: 'Title',      cell: (element: any) =&gt; `${element.title}` },
      { name: 'state',      label: 'State',      cell: (element: any) =&gt; `${element.state}` },
      { name: 'url',        label: 'Url',        cell: (element: any) =&gt; `${element.url}`},
      { name: 'created_at', label: 'Created at', cell: (element: any) =&gt; `${element.created_at}`},
      { name: 'updated_at', label: 'Updated at', cell: (element: any) =&gt; `${element.updated_at}`},
  ]
  // displayedColumns = ['id', 'title', 'state', 'url', 'created_at', 'updated_at', 'actions'];
  displayedColumns = this.columns.map(x =&gt; x.name).concat(['actions']);
  </code></pre>
  
  <p>I didn't touch the components.css</p>
  
  <p><a href="https://i.stack.imgur.com/Hpvek.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Hpvek.png" alt="enter image description here"></a></p>