Performance issue with selecting a checkbox in HTML table with 1000+ rows

Question

We have a simple HTML table with tr td combination. The table has 65 columns to it and it will have minimum of 1000 rows and it could be more as well.

We are seeing a huge performance issue when selecting a checkbox in a row, it takes around 3-4 seconds to select a checkbox and render it as checked. We have used Angular CDK virtualScroll and it has improved the performance by a great extent. But still we see the issue as mentioned.

What would be the cause of the issue? Is it normal to see this performance issue with these many records or would there be any design issue that would be causing this issue?

Answer 1

Well I too had the same requirements and was facing the same issue performance issue. And there are few points that helped me, Firstly as a side note, the performance will be slow in development mode as compared to production mode. Try to implement change detection strategy to onPush. Load the data in chunks say 20-30 items. Implement angular trackBy feature along with ngFor directive. Hope this will help you. As it does mine.

Answer 2

The issue was resolved by using Angular material virtual scrolling technique. https://material.angular.io/cdk/scrolling/overview