title: Using Virtual Scroll in Angular Material 2 Table with @angular/cdk-experimental
body: <p>I have a table displays so many rows, I want to optimize the performance of it. I've found a solution by using Virtual Scroll technique. Here is an example of <a href="https://github.com/angular/material2/tree/master/src/cdk-experimental/scrolling" rel="noreferrer">Angular Material CDK Vritual Scroll Viewport Component</a> with a simple <code>div</code> I've found:</p>
  
  <pre><code>&lt;cdk-virtual-scroll-viewport class="list-container lg" [itemSize]="52.5"&gt;
    &lt;div *cdkVirtualFor="let state of statesObservable | async;" class="list-group-item"&gt;
       &lt;div class="state"&gt;{{state.name}}&lt;/div&gt;
       &lt;div class="capital"&gt;{{state.capital}}&lt;/div&gt;
    &lt;/div&gt;
  &lt;/cdk-virtual-scroll-viewport&gt;
  </code></pre>
  
  <p>However, I want to integrate it with <a href="https://material.angular.io/components/table/overview" rel="noreferrer">Angular Material Table</a> like below</p>
  
  <pre><code>&lt;table mat-table [dataSource]="dataSource"&gt;
      &lt;ng-container  *ngFor="let c of displayedColumns" [matColumnDef]="c"&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt;{{getTitle(c)}}&lt;/th&gt;
        &lt;td mat-cell style="white-space: pre-wrap;" *matCellDef="let element"&gt; {{element[c]}}&lt;/td&gt;
      &lt;/ng-container&gt;
      &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
      &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
   &lt;/table&gt;
  </code></pre>
  
  <p>I was wondering how to wrap that <code>cdk-virtual-scroll-viewport</code> to <code>mat-table</code>. My table displays up to 1000 rows and more than 20 columns, and the performance is pretty slow while it's loading and scrolling.</p>
  
  <p><em>PS: I know that it can be solved by using <a href="https://material.angular.io/components/paginator/overview" rel="noreferrer">Paginator</a>, but I don't want to do that.</em></p>
  
  <h1>Versions</h1>
  
  <ol>
  <li><code>"@angular/material": "^6.2.0"</code></li>
  <li><code>@angular/cdk": "^6.2.0"</code></li>
  <li><code>@angular/cdk-experimental": "^6.2.1"</code></li>
  <li><code>"@angular/core": "6.0.3"</code></li>
  <li><code>"@angular/cli": "6.0.7"</code></li>
  </ol>