primefaces / primevue

Next Generation Vue UI Component Library
https://primevue.org
MIT License
10.94k stars 1.25k forks source link

Datatable: poor performance with large number of columns #4958

Open ArtBat123 opened 11 months ago

ArtBat123 commented 11 months ago

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 image

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 commented 11 months ago

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 commented 5 months ago

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.

jackperry commented 3 months ago

Sending a bump as well. Currently having to refactor away from DataTable for some needs as performance (especially in Firefox) becomes unusable alarmingly quickly when using the body slot as previously mentioned.

marconadar commented 1 month ago

+1