title: What is the differences between these two kind of angular data tables?
body: <p>I intended to design a dynamic angular data table. so I defined an array named as <code>displayedColumns</code> and filled it with column names.
  Then I filled <code>dataSource</code> with proper data and everything gets ready to start.</p>
  
  <p>First I tested static column names and everything works great.</p>
  
  <p>Then I tried to make data table dynamic. I used <code>displayedColumns</code> as column name array instead of <code>position</code> column for testing and everything was OK again and I received the same result as the first code produced.</p>
  
  <p>But confusing arises when I decided to replace all of the other columns with their array and index and when I did it, it gave an error!</p>
  
  <p>Here is my first code:</p>
  
  <pre><code>    &lt;table mat-table [dataSource]="this.dataSource"&gt;
    &lt;!-- Position Column --&gt;
    &lt;ng-container matColumnDef="position"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; No. &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt; {{element.position}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- BrandTitle Column --&gt;
    &lt;ng-container matColumnDef="brandTitle"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; BrandTitle &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt; {{element.brandTitle}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- BrandURL Column --&gt;
    &lt;ng-container matColumnDef="brandURL"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; BrandURL &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt; {{element.brandURL}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- BrandDescription Column --&gt;
    &lt;ng-container matColumnDef="brandDescription"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; BrandDescription &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt; {{element.brandDescription}} &lt;/td&gt;
    &lt;/ng-container&gt;
    &lt;tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"&gt;&lt;/tr&gt;
    &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>second code is :</p>
  
  <pre><code>&lt;table mat-table [dataSource]="this.dataSource"&gt;
    &lt;!-- Position Column --&gt;
    &lt;ng-container [matColumnDef]="displayedColumns[0]"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; {{displayedColumns[0]}} &lt;/th&gt;
       &lt;td mat-cell *matCellDef="let element"&gt; {{element[displayedColumns[0]]}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- BrandTitle Column --&gt;
    &lt;ng-container matColumnDef="brandTitle"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; BrandTitle &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt; {{element.brandTitle}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- BrandURL Column --&gt;
    &lt;ng-container matColumnDef="brandURL"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; BrandURL &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt; {{element.brandURL}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- BrandDescription Column --&gt;
    &lt;ng-container matColumnDef="brandDescription"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; BrandDescription &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt; {{element.brandDescription}} 
  &lt;/td&gt;
    &lt;/ng-container&gt;
    &lt;tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"&gt;&lt;/tr&gt;
    &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>finally 3rd code is:</p>
  
  <pre><code>        &lt;table mat-table [dataSource]="this.dataSource"&gt;
        &lt;!-- Position Column --&gt;
        &lt;ng-container [matColumnDef]="displayedColumns[0]"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; {{displayedColumns[0]}} &lt;/th&gt;
           &lt;td mat-cell *matCellDef="let element"&gt; {{element[displayedColumns[0]]}} &lt;/td&gt;
        &lt;/ng-container&gt;
  
        &lt;!-- BrandTitle Column --&gt;
        &lt;ng-container [matColumnDef]="displayedColumns[1]"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; {{displayedColumns[1]}} &lt;/th&gt;
           &lt;td mat-cell *matCellDef="let element"&gt; {{element[displayedColumns[1]]}} &lt;/td&gt;
        &lt;/ng-container&gt;
  
        &lt;!-- BrandURL Column --&gt;
        &lt;ng-container [matColumnDef]="displayedColumns[2]"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; {{displayedColumns[2]}} &lt;/th&gt;
           &lt;td mat-cell *matCellDef="let element"&gt; {{element[displayedColumns[2]]}} &lt;/td&gt;
        &lt;/ng-container&gt;
  
        &lt;!-- BrandDescription Column --&gt;
        &lt;ng-container [matColumnDef]="displayedColumns[3]"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; {{displayedColumns[3]}} &lt;/th&gt;
           &lt;td mat-cell *matCellDef="let element"&gt; {{element[displayedColumns[3]]}} &lt;/td&gt;
        &lt;/ng-container&gt;
  &lt;tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"&gt;&lt;/tr&gt;
    &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And error is : <code>Error: Duplicate column definition name provided: "undefined".</code></p>
  
  <p>Can anyone explain me what's going wrong? and why 2nd code works and 3rd not?</p>
  
  <p>I need to let you know that this code executed successfully:</p>
  
  <pre><code>&lt;table mat-table [dataSource]="this.dataSource"&gt;
    &lt;ng-container matColumnDef="position"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; {{displayedColumns[0]}} &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt; {{element[displayedColumns[0]]}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- BrandTitle Column --&gt;
    &lt;ng-container matColumnDef="brandTitle"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; {{displayedColumns[1]}}// &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt; {{element[displayedColumns[1]]}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- BrandURL Column --&gt;
    &lt;ng-container matColumnDef="brandURL"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; {{displayedColumns[2]}}// &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt; {{element[displayedColumns[2]]}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- BrandDescription Column --&gt;
    &lt;ng-container matColumnDef="brandDescription"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; {{displayedColumns[3]}}// &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt; {{element[displayedColumns[3]]}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"&gt;&lt;/tr&gt;
    &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The problem is with <code>matColumnDef</code>. </p>
  
  <p>You may want to know that if I use <code>[matColumnDef]="displayedColumns[x]"</code> in just one column is OK and works fine but when I use it in another column it raises error!</p>
  
  <p>any Idea?</p>