docs: add virtual scrolling examples

Adds examples of virtual scrolling to the CDK and Material tables.

Author: crisbeto

src/cdk/table/table.md

@@ -19,7 +19,7 @@ top of the CDK data-table.
 The first step to writing the data-table template is to define the columns.
 A column definition is specified via an `<ng-container>` with the `cdkColumnDef` directive, giving
 the column a name. Each column definition can contain a header-cell template
-(`cdkHeaderCellDef`), data-cell template (`cdkCellDef`), and footer-cell 
+(`cdkHeaderCellDef`), data-cell template (`cdkCellDef`), and footer-cell
 template (`cdkFooterCellDef`).
 
 ```html
@@ -120,9 +120,9 @@ cells that are displayed in the column `name` will be given the class `cdk-colum
 columns to be given styles that will match across the header and rows.
 
 Since columns can be given any string for its name, its possible that it cannot be directly applied
-to the CSS class (e.g. `*nameColumn!`). In these cases, the special characters will be replaced by 
+to the CSS class (e.g. `*nameColumn!`). In these cases, the special characters will be replaced by
 the `-` character. For example, cells container in a column named `*nameColumn!` will be given
-the class `cdk-column--nameColumn-`.    
+the class `cdk-column--nameColumn-`.
 
 #### Connecting the table to a data source
 
@@ -158,23 +158,31 @@ table how to uniquely identify rows to track how the data changes with each upda
 ```
 
 ##### `recycleRows`
-By default, `CdkTable` creates and destroys an internal Angular view for each row. This allows rows 
-to participate in animations and to toggle between different row templates with `cdkRowDefWhen`. If 
-you don't need these features, you can instruct the table to cache and recycle rows by specifying 
+By default, `CdkTable` creates and destroys an internal Angular view for each row. This allows rows
+to participate in animations and to toggle between different row templates with `cdkRowDefWhen`. If
+you don't need these features, you can instruct the table to cache and recycle rows by specifying
 `recycleRows`.
 
 ```html
 <table cdk-table [dataSource]="dataSource" recycleRows>
 ```
 
+### Virtual scrolling
+
+If you're showing a large amount of data in your table, you can use virtual scrolling to ensure a
+smooth experience for the user. To enable virtual scrolling, you have to wrap the CDK table in a
+`cdk-virtual-scroll-viewport` element and add some CSS to make it scrollable.
+
+<!-- example(cdk-table-virtual-scroll) -->
+
 ### Alternate HTML to using native table
 
 The CDK table does not require that you use a native HTML table. If you want to have full control
 over the style of the table, it may be easier to follow an alternative template approach that does
 not use the native table element tags.
 
 This alternative approach replaces the native table element tags with the CDK table directive
-selectors. For example, `<table cdk-table>` becomes `<cdk-table>`; `<tr cdk-row`> becomes 
+selectors. For example, `<table cdk-table>` becomes `<cdk-table>`; `<tr cdk-row`> becomes
 `<cdk-row>`. The following shows a previous example using this alternative template:
 
 ```html

src/components-examples/cdk/table/BUILD.bazel

@@ -12,8 +12,8 @@ ng_project(
     deps = [
         "//:node_modules/@angular/core",
         "//:node_modules/rxjs",
-        "//src/cdk/table",
         "//src/cdk/scrolling",
+        "//src/cdk/table",
     ],
 )
 

src/components-examples/cdk/table/cdk-table-virtual-scroll/cdk-table-virtual-scroll-example.css

@@ -0,0 +1,16 @@
+/* Make the container scrollable */
+.example-container {
+  height: 600px;
+  overflow: auto;
+}
+
+.example-container table {
+  width: 100%;
+}
+
+.example-container td,
+.example-container th {
+  height: 48px;
+  padding: 0;
+  text-align: left;
+}

src/components-examples/cdk/table/cdk-virtual-table/cdk-virtual-table-example.html renamed to src/components-examples/cdk/table/cdk-table-virtual-scroll/cdk-table-virtual-scroll-example.html

@@ -1,5 +1,8 @@
+<p>Showing {{dataSource.length}} rows</p>
+
+<!-- Enable virtual scrolling -->
 <cdk-virtual-scroll-viewport class="example-container" [itemSize]="48" [maxBufferPx]="1200" [minBufferPx]="400">
-  <table class="example-virtual-table" cdk-table [dataSource]="dataSource" [trackBy]="trackBy">
+  <table cdk-table [dataSource]="dataSource" [trackBy]="trackBy">
     <!-- Position Column -->
     <ng-container cdkColumnDef="position">
       <th cdk-header-cell *cdkHeaderCellDef> No. </th>
@@ -28,8 +31,7 @@
       <th cdk-footer-cell *cdkFooterCellDef> Symbol </th>
     </ng-container>
 
-    <tr cdk-header-row *cdkHeaderRowDef="displayedColumns; sticky: true;"></tr>
+    <tr cdk-header-row *cdkHeaderRowDef="displayedColumns"></tr>
     <tr cdk-row *cdkRowDef="let row; columns: displayedColumns;"></tr>
-    <tr cdk-footer-row *cdkFooterRowDef="displayedColumns; sticky: true;"></tr>
   </table>
 </cdk-virtual-scroll-viewport>

src/components-examples/cdk/table/cdk-virtual-flex-table/cdk-virtual-flex-table-example.ts renamed to src/components-examples/cdk/table/cdk-table-virtual-scroll/cdk-table-virtual-scroll-example.ts

@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {CdkTableModule} from '@angular/cdk/table';
-import {CdkFixedSizeVirtualScroll, CdkVirtualScrollViewport} from '@angular/cdk/scrolling';
+import {ScrollingModule} from '@angular/cdk/scrolling';
 
 export interface PeriodicElement {
   name: string;
@@ -23,22 +23,22 @@ const ELEMENT_DATA: PeriodicElement[] = [
 ];
 
 const EXPANDED_ELEMENT_DATA: PeriodicElement[] = [];
-for (let x = 0; x < 100; x++) {
+for (let x = 0; x < 250; x++) {
   for (const entry of ELEMENT_DATA) {
     EXPANDED_ELEMENT_DATA.push({...entry, position: entry.position + 10 * x});
   }
 }
 
 /**
- * @title Example of a flex table with virtual scroll enabled.
+ * @title Example of a CDK table with virtual scroll enabled.
  */
 @Component({
-  selector: 'cdk-virtual-flex-table-example',
-  styleUrls: ['cdk-virtual-flex-table-example.css'],
-  templateUrl: 'cdk-virtual-flex-table-example.html',
-  imports: [CdkTableModule, CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll],
+  selector: 'cdk-table-virtual-scroll-example',
+  styleUrls: ['cdk-table-virtual-scroll-example.css'],
+  templateUrl: 'cdk-table-virtual-scroll-example.html',
+  imports: [CdkTableModule, ScrollingModule],
 })
-export class CdkVirtualFlexTableExample {
+export class CdkTableVirtualScrollExample {
   displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
   dataSource = EXPANDED_ELEMENT_DATA;
   trackBy = (index: number, el: PeriodicElement) => el.position;

src/components-examples/cdk/table/cdk-virtual-flex-table/cdk-virtual-flex-table-example.css

@@ -2,5 +2,4 @@ export {CdkTableFlexBasicExample} from './cdk-table-flex-basic/cdk-table-flex-ba
 export {CdkTableBasicExample} from './cdk-table-basic/cdk-table-basic-example';
 export {CdkTableFixedLayoutExample} from './cdk-table-fixed-layout/cdk-table-fixed-layout-example';
 export {CdkTableRecycleRowsExample} from './cdk-table-recycle-rows/cdk-table-recycle-rows-example';
-export {CdkVirtualFlexTableExample} from './cdk-virtual-flex-table/cdk-virtual-flex-table-example';
-export {CdkVirtualTableExample} from './cdk-virtual-table/cdk-virtual-table-example';
+export {CdkTableVirtualScrollExample} from './cdk-table-virtual-scroll/cdk-table-virtual-scroll-example';

src/components-examples/cdk/table/cdk-virtual-flex-table/cdk-virtual-flex-table-example.html

@@ -30,3 +30,4 @@ export {TableDynamicArrayDataExample} from './table-dynamic-array-data/table-dyn
 export {TableDynamicObservableDataExample} from './table-dynamic-observable-data/table-dynamic-observable-data-example';
 export {TableGeneratedColumnsExample} from './table-generated-columns/table-generated-columns-example';
 export {TableFlexLargeRowExample} from './table-flex-large-row/table-flex-large-row-example';
+export {TableVirtualScrollExample} from './table-virtual-scroll/table-virtual-scroll-example';