Search code examples
javascripthtmlangularangular-cdk-virtual-scroll

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


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?


Solution

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