virtual-scroll: add support for user-provided content wrapper

Author: mmalerba

src/cdk-experimental/scrolling/virtual-for-of.ts

@@ -49,8 +49,13 @@ export type CdkVirtualForOfContext<T> = {
 };
 
 
-/** Helper to extract size from a ClientRect. */
-function getSize(orientation: 'horizontal' | 'vertical', rect: ClientRect): number {
+/** Helper to extract size from a DOM Node. */
+function getSize(orientation: 'horizontal' | 'vertical', node: Node): number {
+  const el = node as Element;
+  if (!el.getBoundingClientRect) {
+    return 0;
+  }
+  const rect = el.getBoundingClientRect();
   return orientation == 'horizontal' ? rect.width : rect.height;
 }
 
@@ -193,15 +198,14 @@ export class CdkVirtualForOf<T> implements CollectionViewer, DoCheck, OnDestroy
     const rangeLen = range.end - range.start;
 
     // Loop over all root nodes for all items in the range and sum up their size.
-    // TODO(mmalerba): Make this work with non-element nodes.
     let totalSize = 0;
     let i = rangeLen;
     while (i--) {
       const view = this._viewContainerRef.get(i + renderedStartIndex) as
           EmbeddedViewRef<CdkVirtualForOfContext<T>> | null;
       let j = view ? view.rootNodes.length : 0;
       while (j--) {
-        totalSize += getSize(orientation, (view!.rootNodes[j] as Element).getBoundingClientRect());
+        totalSize += getSize(orientation, view!.rootNodes[j]);
       }
     }
 

src/cdk-experimental/scrolling/virtual-scroll-viewport.scss

@@ -16,10 +16,48 @@ cdk-virtual-scroll-viewport {
 
 .cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper {
   bottom: 0;
+
+  & > dl,
+  & > ol,
+  & > table,
+  & > ul {
+    padding: {
+      left: 0;
+      right: 0
+    };
+    margin: {
+      left: 0;
+      right: 0
+    };
+    border: {
+      left-width: 0;
+      right-width: 0
+    };
+    outline: none;
+  }
 }
 
 .cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper {
   right: 0;
+
+  & > dl,
+  & > ol,
+  & > table,
+  & > ul {
+    padding: {
+      top: 0;
+      bottom: 0
+    };
+    margin: {
+      top: 0;
+      bottom: 0
+    };
+    border: {
+      top-width: 0;
+      bottom-width: 0
+    };
+    outline: none;
+  }
 }
 
 // Spacer element that whose width or height will be adjusted to match the size of the entire data

src/cdk-experimental/scrolling/virtual-scroll-viewport.ts

@@ -67,7 +67,10 @@ export class CdkVirtualScrollViewport implements OnInit, OnDestroy {
    */
   _totalContentSize = 0;
 
-  /** The the rendered content transform. */
+  /**
+   * The the rendered content transform, used to move the rendered portion of the content to the
+   * correct place in the viewport.
+   */
   private _renderedContentTransform: string;
 
   /** The currently rendered range of indices. */

src/cdk-experimental/scrolling/virtual-scroll.md

@@ -142,3 +142,21 @@ content.
   ...
 </cdk-virtual-scroll-viewport>
 ```
+
+### Elements with parent tag requirements
+Some HTML elements such as `<tr>` and `<li>` have limitations on the kinds of parent elements they
+can be placed inside. To enable virtual scrolling over these type of elements, place the elements in
+their proper parent, and then wrap the whole thing in a `cdk-virtual-scroll-viewport`. Be careful
+that the parent does not introduce additional space (e.g. via `margin` or `padding`) as it may
+interfere with the scrolling.
+
+```html
+<cdk-virtual-scroll-viewport itemSize="50">
+  <table>
+    <tr *cdkVirtualFor="let row of rows">
+      <td>{{row.first}}</td>
+      <td>{{row.second}}</td>
+    </tr>
+  </table>
+</cdk-virtual-scroll-viewport>
+```

src/demo-app/virtual-scroll/virtual-scroll-demo.html

@@ -94,3 +94,45 @@ <h2>trackBy state name</h2>
     <div class="demo-capital">{{state.capital}}</div>
   </div>
 </cdk-virtual-scroll-viewport>
+
+<h2>Use with <code>&lt;ol&gt;</code></h2>
+
+<cdk-virtual-scroll-viewport class="demo-viewport" autosize #viewport>
+  <ol class="demo-ol" [start]="viewport.getRenderedRange().start + 1">
+    <li *cdkVirtualFor="let state of statesObservable | async" class="demo-li">
+      {{state.name}} - {{state.capital}}
+    </li>
+  </ol>
+</cdk-virtual-scroll-viewport>
+
+<h2>Use with <code>&lt;ul&gt;</code></h2>
+
+<cdk-virtual-scroll-viewport class="demo-viewport" autosize>
+  <ul class="demo-ul">
+    <li *cdkVirtualFor="let state of statesObservable | async" class="demo-li">
+      {{state.name}} - {{state.capital}}
+    </li>
+  </ul>
+</cdk-virtual-scroll-viewport>
+
+<h2>Use with <code>&lt;dl&gt;</code></h2>
+
+<cdk-virtual-scroll-viewport class="demo-viewport" autosize>
+  <dl class="demo-dl">
+    <ng-container *cdkVirtualFor="let state of statesObservable | async">
+      <dt class="demo-dt">{{state.name}}</dt>
+      <dd class="demo-dd">{{state.capital}}</dd>
+    </ng-container>
+  </dl>
+</cdk-virtual-scroll-viewport>
+
+<h2>Use with <code>&lt;table&gt;</code></h2>
+
+<cdk-virtual-scroll-viewport class="demo-viewport" autosize>
+  <table class="demo-ol">
+    <tr *cdkVirtualFor="let state of statesObservable | async" class="demo-tr">
+      <td class="demo-td">{{state.name}}</td>
+      <td class="demo-td">{{state.capital}}</td>
+    </tr>
+  </table>
+</cdk-virtual-scroll-viewport>

src/demo-app/virtual-scroll/virtual-scroll-demo.scss

@@ -37,3 +37,21 @@
 .demo-capital {
   font-size: 14px;
 }
+
+.demo-dt {
+  height: 30px;
+  font-weight: bold;
+}
+
+.demo-dd {
+  height: 30px;
+}
+
+.demo-li,
+.demo-td {
+  height: 50px;
+}
+
+.demo-td {
+  border: 1px solid gray;
+}