title: Using a static array as datasource for mat-table
body: <p>I'm trying to make use of the <a href="https://material.angular.io/components/table/overview" rel="noreferrer">Angular Material table</a>. I'm trying to use the same code as the examples they have but I tin into a problem when I have to define the <code>[dataSource]="data"</code>.</p>
  
  <p>This question may sound stupid but my table data is a simple array of objects, how can I implement that?</p>
  
  <p>for the sake of explaining let's say my data looks like this:</p>
  
  <p><code>public data = [{ ID: 1, Code: "Hi" }, { ID: 2, Code: "Bye" }];</code></p>
  
  <p>Here's the code I currently have: </p>
  
  <pre><code>&lt;div class="example-container mat-elevation-z8"&gt;
      &lt;mat-table #table [dataSource]="data"&gt;
          &lt;ng-container matColumnDef="number"&gt;
              &lt;mat-header-cell *matHeaderCellDef&gt; Number &lt;/mat-header-cell&gt;
              &lt;mat-cell *matCellDef="let row"&gt; {{ row.ID }} &lt;/mat-cell&gt;
          &lt;/ng-container&gt;
  
          &lt;ng-container matColumnDef="Code"&gt;
              &lt;mat-header-cell *matHeaderCellDef&gt; Code &lt;/mat-header-cell&gt;
              &lt;mat-cell *matCellDef="let row"&gt;{{row.Code}}&lt;/mat-cell&gt;
          &lt;/ng-container&gt;
  
          &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
          &lt;mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/mat-row&gt;
      &lt;/mat-table&gt;
  &lt;/div&gt;
  </code></pre>