*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?