diff --git a/demo/app/samples/test.component.html b/demo/app/samples/test.component.html
index a5aa48ce..6e1753e3 100644
--- a/demo/app/samples/test.component.html
+++ b/demo/app/samples/test.component.html
@@ -41,17 +41,25 @@
-
-
-
- {{item.text}}
-
- {{item.isSelected ? '********' : ''}}
-
-
-
+
+
+ data |
+
+
+
+
+
+ {{item.text}}
+
+ {{item.isSelected ? '********' : ''}}
+
+
+
+ |
+
+
+
diff --git a/demo/styles.css b/demo/styles.css
index 72809079..2a1bcab0 100644
--- a/demo/styles.css
+++ b/demo/styles.css
@@ -318,3 +318,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/classes/viewport.ts b/src/component/classes/viewport.ts
index db2c80a9..478c7e2f 100644
--- a/src/component/classes/viewport.ts
+++ b/src/component/classes/viewport.ts
@@ -36,9 +36,15 @@ export class Viewport {
this.scrollEventElement =
(this.element.ownerDocument);
this.scrollable = this.scrollEventElement.scrollingElement;
} else {
- this.host = this.element.parentElement;
+ this.host = this.element.parentElement;//.parentElement.parentElement;
+ if (this.host) {
+ this.host = this.host.parentElement;
+ }
+ if (this.host) {
+ this.host = this.host.parentElement;
+ }
this.scrollEventElement = this.host;
- this.scrollable = this.element.parentElement;
+ this.scrollable = this.host;
}
this.paddings = new Paddings(this.element, this.routines, settings);
diff --git a/src/component/processes/render.ts b/src/component/processes/render.ts
index 63146aea..93710e71 100644
--- a/src/component/processes/render.ts
+++ b/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) => {
+ (elt).dataset['sid'] = scroller.state.fetch.items[index].nodeId;
+ });
if (Render.processElements(scroller)) {
scroller.callWorkflow({
process: Process.render,
status: ProcessStatus.next,
payload: { noClip: scroller.state.clip.noClip }
});
- } else {
+ } } else {
scroller.callWorkflow({
process: Process.render,
status: ProcessStatus.error,
@@ -55,6 +60,7 @@ export default class Render {
item.element = element;
item.element.style.left = '';
item.element.style.position = '';
+ item.element.classList.remove('temp');
item.invisible = false;
item.setSize();
buffer.cache.add(item);
diff --git a/src/ui-scroll.component.ts b/src/ui-scroll.component.ts
index 1157e0c3..b7d68573 100644
--- a/src/ui-scroll.component.ts
+++ b/src/ui-scroll.component.ts
@@ -9,11 +9,20 @@ import { Datasource as IDatasource } from './component/interfaces/index';
import { Datasource } from './component/classes/datasource';
import { Item } from './component/classes/item';
-/* tslint:disable:component-selector */
-@Component({
- selector: '[ui-scroll]',
- changeDetection: ChangeDetectionStrategy.OnPush,
- template: ``
+
+/* tslint:disable:component-selector */
+@Component({
+ selector: 'tbody [ui-scroll]',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template
})
export class UiScrollComponent implements OnInit, OnDestroy {
@@ -34,6 +49,7 @@ export class UiScrollComponent implements OnInit, OnDestroy {
public version: string;
public template: TemplateRef;
public datasource: IDatasource | Datasource;
+ public isTable: boolean;
// use in the template
public items: Array- ;
diff --git a/src/ui-scroll.directive.ts b/src/ui-scroll.directive.ts
index 81802f15..8b9766d1 100644
--- a/src/ui-scroll.directive.ts
+++ b/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,
@@ -20,6 +21,10 @@ export class UiScrollDirective implements OnInit {
this.datasource = datasource;
}
+ @Input() set uiScrollTable(value: any) {
+ this.isTable = !!value;
+ }
+
ngOnInit() {
const templateView = this.templateRef.createEmbeddedView({});
const compFactory = this.resolver.resolveComponentFactory(UiScrollComponent);
@@ -28,6 +33,7 @@ export class UiScrollDirective implements OnInit {
);
componentRef.instance.datasource = this.datasource;
componentRef.instance.template = this.templateRef;
+ componentRef.instance.isTable = this.isTable;
componentRef.instance.version = version;
}
}