-
-
- {{item.text}}
-
- {{item.isSelected ? '********' : ''}}
-
-
-
+
+
+ | data |
+
+
+
+
+
+ {{item.text}}
+
+ {{item.isSelected ? '********' : ''}}
+
+
+ |
+
+
+
diff --git a/demo/styles.css b/demo/styles.css
index 59a9e3df..ad22c4c3 100644
--- a/demo/styles.css
+++ b/demo/styles.css
@@ -340,3 +340,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; }
diff --git a/src/component/processes/render.ts b/src/component/processes/render.ts
index 7cc4b79a..750fb373 100644
--- a/src/component/processes/render.ts
+++ b/src/component/processes/render.ts
@@ -14,13 +14,18 @@ export default class 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) => {
+ (
elt).dataset['sid'] = scroller.state.fetch.items[index].nodeId;
+ });
if (Render.processElements(scroller)) {
workflow.call({
process: Process.render,
status: render.noSize ? ProcessStatus.done : ProcessStatus.next,
payload: { noClip: clip.noClip }
});
- } else {
+ } } else {
workflow.call({
process: Process.render,
status: ProcessStatus.error,
@@ -59,6 +64,7 @@ export default class Render {
item.element = element as HTMLElement;
item.element.style.left = '';
item.element.style.position = '';
+ item.element.classList.remove('temp');
item.invisible = false;
item.setSize();
buffer.cacheItem(item);
diff --git a/src/ui-scroll.component.ts b/src/ui-scroll.component.ts
index 649f27dd..9d25c43c 100644
--- a/src/ui-scroll.component.ts
+++ b/src/ui-scroll.component.ts
@@ -1,7 +1,8 @@
import {
Component, OnInit, OnDestroy,
TemplateRef, ElementRef,
- ChangeDetectionStrategy, ChangeDetectorRef
+ ChangeDetectionStrategy, ChangeDetectorRef,
+ ViewChild
} from '@angular/core';
import { Workflow } from './component/workflow';
@@ -9,34 +10,67 @@ import { IDatasource } from './component/interfaces/index';
import { Datasource } from './component/classes/datasource';
import { Item } from './component/classes/item';
+const tableTemplate = `
+
+
+ |
+
+
+
+ |
+
+
+`;
+
+const commonTemplate = `
+
+
+
+
+
+
+
+`;
+
/* tslint:disable:component-selector */
@Component({
- selector: '[ui-scroll]',
+ selector: 'tbody [ui-scroll]',
changeDetection: ChangeDetectionStrategy.OnPush,
- template: `
-
-
-
-
- `
+ template: `
+ ${commonTemplate}
+ ${tableTemplate}
+ `
})
export class UiScrollComponent implements OnInit, OnDestroy {
+ @ViewChild('uiScrollTemplateRef', { static: true })
+ public uiScrollTemplateRef: TemplateRef;
+
// these should come from the directive
public version: string;
public template: TemplateRef;
public datasource: IDatasource | Datasource;
+ public isTable: boolean;
+ public parentElement: HTMLElement;
// the only template variable
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[]) => {
diff --git a/src/ui-scroll.directive.ts b/src/ui-scroll.directive.ts
index ef7f263d..c25ea904 100644
--- a/src/ui-scroll.directive.ts
+++ b/src/ui-scroll.directive.ts
@@ -7,6 +7,7 @@ import { IDatasource } from './component/interfaces/datasource';
@Directive({ selector: '[uiScroll][uiScrollOf]' })
export class UiScrollDirective implements OnInit {
private datasource: IDatasource;
+ private isTable: boolean;
constructor(
private templateRef: TemplateRef,
@@ -19,13 +20,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, void 0, 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()); // 😢
}
}