*uiScroll on table row

[dabcat]

Hi @dhilt ,

was wondering if there is a workaround on using directive on table instead of div. Something like :

<tbody class="viewport" [style.height.px]="800" *ngIf="datasource">
        <tr *uiScroll="let rows of datasource">
            <td *ngFor="let column of objectKeys(rows)">{{rows[column]}}</td>
        </tr>
</tbody>

Currently it's not working properly as it wraps each record in <div data-sid="XYZ">

This would be really awesome if it could work with tables 😄

Cheers!

[dhilt]

@dabcat Yes, this is known issue – https://stackoverflow.com/a/50161881/3211932 (posted it 10 days ago). You are absolutely right, we should allow tables syntax, so I put the "enhancement" tag and will do it right after 0.0.5 version is released. Thanks!

[mohammed534]

i'm getting this error
Datasource get method invalid signature

[dhilt]

@mohammed534 please open another issue, post your code and I will take a look

[Kim-Andersen]

@dhilt Any news on this enhancement?

[dhilt]

@Kim-Andersen ngx-ui-scroll v1.0.0 is almost here, so I guess table-layout feature can be started soon after this release.

[brandom]

@dhilt Any update on this? I would like to use this on the material expansion panel but the div wrapper is messing up the styles.

[dhilt]

Sorry guys! Not so much time I have for now. Table templating is definitely possible, but it's implementation is not obvious. I had some progress but I stubbed with one extra tag issue and have no time to dig into it by myself. So today I posted question on SO which might help. If no one answer in 2 days, I'm going to draw attention by placing a bounty on it. Would be great if you could help me to promote it a bit by upvoting the question: https://stackoverflow.com/questions/58826887/using-dynamic-component-within-angular-structural-directive-produces-extra-html

@brandom ^

[markdBC]

@dhilt I've replied to your question on SO (https://stackoverflow.com/questions/58826887/using-dynamic-component-within-angular-structural-directive-produces-extra-html) with a solution. Does this help solve the problem with tables?

[dhilt]

@markdBC That seems work, I tried it on ngx-ui-scroll locally and can confirm that we are ready to take another step towards supporting table-based layout. Maybe you want to make a PR looking at table-layout branch?

The directive changes should go there:

ngx-ui-scroll/src/ui-scroll.directive.ts

Lines 29 to 35 in 228296c

	const templateView = this.templateRef.createEmbeddedView({});
	const compFactory = this.resolver.resolveComponentFactory(UiScrollComponent);
	const componentRef = this.viewContainer.createComponent(
	compFactory, undefined, this.viewContainer.injector, [templateView.rootNodes]
	);
	componentRef.instance.datasource = this.datasource;
	componentRef.instance.template = this.templateRef;

The component's template is here:

ngx-ui-scroll/src/ui-scroll.component.ts

Line 12 in 228296c

const template = `<ng-container *ngIf="isTable"><tr data-sid="backward">

Don't try to see the result, it would be not the end of the story... Particularly, the component's elementRef would refer to an island which is not going to be a part of DOM. So its parent element will be null. But the lib needs this parent! Also, mytemplate would refer to a comment child of this island... so I'll need to think how to detect the parent element and pass it to the lib engine. Also, ngOnInit stops fire. And so on. There will be a lot of new issues, but I' ll take care of them. I just want you to push a commit to the lib's repo history, if you have time and you are interested in it. Perhaps we'll continue to resolve other issues together...

Anyway, having you solution, I'm really happy that the lib will overcome this particular deadlock. Thanks a lot!

[markdBC]

@dhilt No problem! I've submitted a PR at #145.

[dhilt]

@markdBC amazing!.. I asked you to look at the initialization issue in the new PR comment, if you have time.

[kupri94]

Any updates?

[dhilt]

@kupri94 Nope, all my efforts are aimed at the Chat App case finalization. Understanding the importance of this feature, I still can't predict when it will be taken into the active development and done. And I'd appreciate any help the community might give.

[gaoyajiang]

Why can't I see this example

[dhilt]

@gaoyajiang No example because this is not done yet. Though considerable efforts have been made. This is a long-term issue requiring a lot of resources that I don't have for now.

[s137]

Any updates on this issue? :)

[dhilt]

Hi @s137, hi all! While I still can't provide table layout support (lack of Angular skills and time, any help would be appreciated), there is a good workaround. The thing is that at the time of the ngx-ui-scroll v3 release, the core (vscroll) was separated from the Angular wrapper, and it became possible to implement another Angular wrapper that meets more specific requirements than the official ngx-ui-scroll wrapper. I created a stackblitz demo implementing table layout over the vscroll core according to the vscroll specification:

https://stackblitz.com/edit/vscroll-angular-integration-table-demo

The scroller itself has <100 lines of code, so please consider this option. In order to use this approach you need to install vscroll instead of ngx-ui-scroll, and then follow the demo. Also, if anyone might be interested, here's the same table-layout demo in a vanilla js context: https://stackblitz.com/edit/vscroll-1-5-3-table (it can help understanding the vscroll specification).