Datatable: poor performance with large number of columns

[ArtBat123]

Describe the bug

After adding 20-30 columns, when quickly scrolling with the mouse or scrolling using the scrollbar, the browser begins to freeze and the elements are not displayed. This is especially noticeable in Firefox. For comparison, you can see how well everything works in another library. https://codesandbox.io/p/sandbox/optimistic-oskar-zh6v5w?file=%2Fdata.js%3A77%2C15

Reproducer

https://codesandbox.io/s/primevue-demo-forked-jsstz9?file=/src/App.vue

PrimeVue version

3.43.0

Vue version

3.x

Language

ES6

Build / Runtime

Vite

Browser(s)

Firefox

Steps to reproduce the behavior

Start scrolling quickly or drag the scrollbar slider

Expected behavior

The table must always be filled with elements

[Rakasch]

I agree with that. We have a lot of full page tables with about 20 columns. We ported two of those to primevue Datatable using virtalscroller and have significant performance issues (tested in Chrome). Since we have a lot of custom components in the cells and not just text, it gets much worse. On a powerful computer, I already have delays of more than a second when scrolling. On a very weak computer, it's even up to 30 seconds. Although we really like all the nice features of the Primevue Datatable, the performance is not sustainable in the long run.

I only added a simple Chip and Badge Component to the reproducer above, and it get noticeably slower. If you add more complex, nested compoents, its getting worse. https://codesandbox.io/p/devbox/primevue-datatable-performance-37kpf7

[sean-dickinson]

I'd just like to bump this issue. I'm running into the same performance issues as I start to add more columns to my table. It gets exponentially worse when using the body slot for these columns to render custom components rather than just text.