Table layout

demo/app/samples/test.component.html

@@ -41,17 +41,25 @@
   <br><br>
 </div>
 
-<div class="viewport" style="height: 600px" id="my-viewport">
-  <div
-    *uiScroll="let item of datasource"
-    (click)="doToggleItem(item)"
-    [style.height]="item.height + 'px'"
-  >
-    <app-samples-test-inner>
-      {{item.text}}
-      <span [style.color]="item.color">
-        {{item.isSelected ? '********' : ''}}
-      </span>
-    </app-samples-test-inner>
-  </div>
+<div class="viewport tableFixHead" style="height: 600px;" id="my-viewport">
+<table>
+  <thead><th>data</th></thead>
+  <tbody>
+    <tr class="temp"
+      *uiScroll="let item of datasource; table:true"
+      (click)="doToggleItem(item)"
+    >
+      <td>
+        <div [style.height]="item.height + 'px'">
+        <app-samples-test-inner>
+          {{item.text}}
+          <span [style.color]="item.color">
+            {{item.isSelected ? '********' : ''}}
+          </span>
+        </app-samples-test-inner>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
 </div>

demo/styles.css

@@ -330,3 +330,20 @@ li.L1,li.L3,li.L5,li.L7,li.L9 { }
   pre .typ, code .typ { font-weight: bold }
   pre .tag, code .tag { font-weight: bold; color: #204a87; }
 }
+
+table tr.temp {
+  color: red;
+  position: fixed;
+  left: -99999px;
+}
+
+table, caption, tbody, tfoot, thead, tr, th, td {
+  padding: 0;
+}
+
+.tableFixHead          { overflow-y: auto; height: 100px; }
+.tableFixHead thead th { position: sticky; top: 0; }
+
+/* Just common table stuff. Really. */
+table  { border-collapse: collapse; }
+th     { background:#eee; }

src/component/classes/viewport.ts

@@ -35,8 +35,8 @@ export class Viewport {
       this.scrollable = <HTMLElement>this.scrollEventElement.scrollingElement;
     } else {
       this.host = <HTMLElement>this.element.parentElement;
-      this.scrollEventElement = this.host;
-      this.scrollable = <HTMLElement>this.element.parentElement;
+      this.scrollEventElement = <HTMLElement>this.host.parentElement;
+      this.scrollable = <HTMLElement>this.host.parentElement;
     }
 
     this.paddings = new Paddings(this.element, this.routines, settings);

src/component/processes/render.ts

@@ -8,13 +8,18 @@ export default class Render {
     scroller.logger.stat('before new items render');
     scroller.innerLoopSubscriptions.push(
       scroller.bindData().subscribe(() => {
+        const elts = scroller.viewport.element.querySelectorAll(`tr:not([data-sid])`);
+        if (elts && elts.length && elts.length === scroller.state.fetch.items.length) {
+          elts.forEach((elt, index) => {
+            (<any>elt).dataset['sid'] = scroller.state.fetch.items[index].nodeId;
+          });
         if (Render.processElements(scroller)) {
           scroller.workflow.call({
             process: Process.render,
             status: ProcessStatus.next,
             payload: { noClip: scroller.state.clip.noClip }
           });
-        } else {
+        } } else {
           scroller.workflow.call({
             process: Process.render,
             status: ProcessStatus.error,
@@ -55,6 +60,7 @@ export default class Render {
     item.element = <HTMLElement>element;
     item.element.style.left = '';
     item.element.style.position = '';
+    item.element.classList.remove('temp');
     item.invisible = false;
     item.setSize();
     buffer.cache.add(item);

src/ui-scroll.component.ts

@@ -1,42 +1,76 @@
 import {
   Component, OnInit, OnDestroy,
   TemplateRef, ElementRef,
-  ChangeDetectionStrategy, ChangeDetectorRef
+  ChangeDetectionStrategy, ChangeDetectorRef,
+  ViewChild
 } from '@angular/core';
 
 import { Workflow } from './component/workflow';
 import { Datasource as IDatasource } from './component/interfaces/index';
 import { Datasource } from './component/classes/datasource';
 import { Item } from './component/classes/item';
 
+const tableTemplate = `
+<ng-container *ngIf="isTable">
+  <tr data-sid="backward">
+    <td><div data-padding-backward></div></td>
+  </tr>
+  <ng-template
+    *ngFor="let item of items"
+    [ngTemplateOutlet]="template"
+    [ngTemplateOutletContext]="{
+      $implicit: item.data,
+      index: item.$index,
+      odd: item.$index % 2,
+      even: !(item.$index % 2)
+  }"></ng-template>
+  <tr data-sid="forward">
+    <td><div data-padding-forward></div></td>
+  </tr>
+</ng-container>
+`;
+
+const commonTemplate = `
+<ng-container *ngIf="!isTable">
+  <div data-padding-backward></div>
+  <div
+    *ngFor="let item of items"
+    [attr.data-sid]="item.nodeId"
+    [style.position]="item.invisible ? 'fixed' : null"
+    [style.left]="item.invisible ? '-99999px' : null">
+    <ng-template
+      [ngTemplateOutlet]="template"
+      [ngTemplateOutletContext]="{
+        $implicit: item.data,
+        index: item.$index,
+        odd: item.$index % 2,
+        even: !(item.$index % 2)
+    }"></ng-template>
+  </div>
+  <div data-padding-forward></div>
+</ng-container>
+`;
+
 /* tslint:disable:component-selector */
 @Component({
-  selector: '[ui-scroll]',
+  selector: 'tbody [ui-scroll]',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <div data-padding-backward></div>
-    <div
-      *ngFor="let item of items"
-      [attr.data-sid]="item.nodeId"
-      [style.position]="item.invisible ? 'fixed' : null"
-      [style.left]="item.invisible ? '-99999px' : null">
-      <ng-template
-        [ngTemplateOutlet]="template"
-        [ngTemplateOutletContext]="{
-          $implicit: item.data,
-          index: item.$index,
-          odd: item.$index % 2,
-          even: !(item.$index % 2)
-      }"></ng-template>
-    </div>
-    <div data-padding-forward></div>`
+  template: `<ng-template #uiScrollTemplateRef>
+    ${commonTemplate}
+    ${tableTemplate}
+  </ng-template>`
 })
 export class UiScrollComponent implements OnInit, OnDestroy {
 
+  @ViewChild('uiScrollTemplateRef', { static: true })
+  public uiScrollTemplateRef: TemplateRef<any>;
+
   // come from the directive
   public version: string;
   public template: TemplateRef<any>;
   public datasource: IDatasource | Datasource;
+  public isTable: boolean;
+  public parentElement: HTMLElement;
 
   // use in the template
   public items: Item[] = [];
@@ -46,11 +80,12 @@ export class UiScrollComponent implements OnInit, OnDestroy {
 
   constructor(
     public changeDetector: ChangeDetectorRef,
-    public elementRef: ElementRef) { }
+    public elementRef: ElementRef
+  ) { }
 
   ngOnInit() {
     this.workflow = new Workflow(
-      this.elementRef.nativeElement,
+      this.parentElement, // this.elementRef.nativeElement,
       this.datasource,
       this.version,
       (items: Item[]) => {

src/ui-scroll.directive.ts

@@ -8,6 +8,7 @@ import { Datasource } from './component/interfaces/datasource';
 export class UiScrollDirective implements OnInit {
   private version: string;
   private datasource: Datasource;
+  private isTable: boolean;
 
   constructor(
     private templateRef: TemplateRef<any>,
@@ -20,13 +21,19 @@ export class UiScrollDirective implements OnInit {
     this.datasource = datasource;
   }
 
+  @Input() set uiScrollTable(value: any) {
+    this.isTable = !!value;
+  }
+
   ngOnInit() {
     const compFactory = this.resolver.resolveComponentFactory(UiScrollComponent);
-    const componentRef = this.viewContainer.createComponent(
-      compFactory, undefined, this.viewContainer.injector
-    );
+    const componentRef = compFactory.create(this.viewContainer.injector);
     componentRef.instance.datasource = this.datasource;
     componentRef.instance.template = this.templateRef;
+    componentRef.instance.isTable = this.isTable;
     componentRef.instance.version = version;
+    componentRef.instance.parentElement = this.templateRef.elementRef.nativeElement.parentElement;
+    this.viewContainer.createEmbeddedView(componentRef.instance.uiScrollTemplateRef);
+    setTimeout(() => componentRef.changeDetectorRef.detectChanges()); // 😢
   }
 }