title: Angular 2-4 Mat-Table row in another component
body: <p>I would like to know if I can place the mat table rows in another component different from the table component, here is an example:</p>
  
  <pre><code>&lt;mat-table #table [dataSource]="dataSource" class="table" matSort&gt;
  &lt;user-table-row&gt; &lt;/user-table-row&gt;
  
    &lt;ng-container matColumnDef="profile"&gt;
      &lt;mat-header-cell *matHeaderCellDef mat-sort-header class="header-cell"&gt; Profile Type &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let user" class="cell"&gt; {{user.profile.type}} &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="status"&gt;
      &lt;mat-header-cell *matHeaderCellDef mat-sort-header class="header-cell"&gt; Status &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let user" class="cell"&gt; {{user.profile.status}} &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
  
  
  &lt;!-- Header and Row Declarations --&gt;
    &lt;mat-header-row *matHeaderRowDef="['createdAt', 'email', 'profile', 'status', 'isApproved', 'actions']" class="header-row"&gt;&lt;/mat-header-row&gt;
    &lt;mat-row *matRowDef="let row; columns: ['createdAt', 'email', 'profile', 'status', 'isApproved', 'actions']" class="row"&gt;&lt;/mat-row&gt;
  &lt;/mat-table&gt;
  </code></pre>
  
  <p>How do I make something like this:</p>
  
  <pre><code>&lt;mat-table #table [dataSource]="dataSource" class="table" matSort&gt;
    &lt;user-table-row&gt; &lt;/user-table-row&gt;
  &lt;/mat-table&gt;
  </code></pre>
  
  <p>Is it possible, anyone have done this before?</p>