cdk virtual scroll viewport with child table row

Published
  1. i am using cdk-virtual-scroll-viewport for virtual scroll in Angular 11
  2. i want to show virtual scroll on child table row, so how can i implement for table row only, here is the screenshot of my table and code.
    <cdk-virtual-scroll-viewport [itemSize]="100" style="height: 450px;">
        <table class="table table-bordered tabledesign">
            <thead>
                <tr>
                    <th [style.top]="inverseOfTranslation" style="position: sticky !important;" *ngFor="let col of columns">
                        {{ col.title }}
                    </th>
                </tr>
            </thead>
            <tbody>
                <ng-container *ngFor="let row of rows; let i = index">
                    <tr>
                        <ng-container *ngFor="let col of columns">
                            <ng-container [ngSwitch]="col.type">
                                <td *ngSwitchCase="'expandIcon'">
                                    <span *ngIf="row.child && row.child.length">
                                        <a *ngIf="!row.showChild" (click)="row.showChild = true">
                                            <i class="fa fa-plus-square-o plus-icon"></i>
                                        </a>
                                        <a *ngIf="row.showChild" (click)="row.showChild = false">
                                            <i class="fa fa-minus-square-o plus-icon"></i>
                                        </a>
                                    </span>
                                </td>
                            </ng-container>
                        </ng-container>
                    </tr>
    
                    <ng-container *ngIf="row.child && row.showChild">
                        <tr *cdkVirtualFor="let childParameter of row.child; let cInd=index;">
                            <ng-container *ngFor="let col of childColumns">
                                <ng-container [ngSwitch]="col.type">
                                    <td *ngSwitchCase="'custom_sr'">
                                        1.1
                                    </td>
                                </ng-container>
                            </ng-container>
                        </tr>
                    </ng-container>
                </ng-container>
            </tbody>
        </table>
    </cdk-virtual-scroll-viewport>
    

enter image description here

i want to just add virtual scroll for child table row only

Source: Angular Questions

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq