Multiple p-menu components on p-treeTable

[ruchikdv]

I am using PrimeNG 5.2.7 and using the TreeTable with around 30-40k items in the tree.
In the last column of the tree I have put p-menu disguised as a 3-dot menu.
The code looks like this:

Code: Select all

	<p-column [style]="{'width':'4%'}">
            <ng-template let-col let-node="rowData" pTemplate="body">
                <div *ngIf="node.children.length == 0">
                    <p-menu #menu popup="popup" [model]="contextMenuItems" appendTo="body"></p-menu>
                    <div class="iconContainer" (click)="openContextMenu(node, menu, $event)">
                        <i class="fa fa-ellipsis-v" style="color:#212121;padding:5px"></i>
                    </div>
                </div>
            </ng-template>
        </p-column>

The final output looks like this:
https://pasteboard.co/HIRuqVC.jpg

The problem is that when there are too many nodes open at the same time (e.g. 20-25) then the treeTable behaves extremely sluggish. Nodes do not openly instantly and it takes a few seconds before a node open and reveals its children. If I have remove p-menu from the template, then everything works smoothly.

I assume that this sluggishness must be because multiple p-menu components are rendered at the same time on the treeTable.
Is there a way I can achieve the same functionality without compromising on the speed of treetable?