Primeng table very slow with virtual scroll and expanded rows

Question

The table loads super and editing is also slow to start when rowexpansion is added for large data 2000 rows by 64 columns and 10000 rows by 5 columns. It looks like lazy load is not implemented on it. I was thinking of just loading expanded rows only when the button is clicked. I tried to bind with *ngIf and the expand button click but it didn't expand. Even conditionally disabling using *ngIf for tables with no related record didn't work. Is there any way of making it lazy load?

I have live example in stackblitz.

score 1 · Accepted Answer · answered Mar 31 '22 at 15:42

1

It seems like this is a bug on primeng but I found a good workaround. Mainly, the solution involves removal of rowexpansion completely and replacing it by <tr> that will contain a div or another component that appears conditionally when the Expand button is clicked.

See the updated stackbitiz with no lag.

answered Mar 31 '22 at 15:42

wondim

697
15
29

Hi, I got similar issue, thanks for the demo, but the row does not seem to be expandable, can you double check it? – Hoàng Nguyễn Jul 14 '22 at 07:29
Sorry, let me re-check it – wondim Jul 31 '22 at 15:09
@HoàngNguyễn I made few update. The updated one has an empty `` on line 41. In the `` you need to show it conditionally on click on the expansion button that contains a related table. The difference between the two demos is, the first one has rowexpansion and the second one has just ``. – wondim Jul 31 '22 at 15:16

Primeng table very slow with virtual scroll and expanded rows

1 Answers1