PrimeVue DataTable loads very slow with 2000+ records, compared to Vue.js + basic html table

[redfox05]

Hi there,

I'm having performance issues with the PrimeVue Datatable, and would like some help to understand how to find the issue and fix it. With 2000+ records, the DataTable loads very slowly, minimum 5 seconds, sometimes 10 or more seconds.

With a basic Vue.js component and a standard html table, the same dataset loads in 2 seconds.

I know there's VirtualScroller and Pagination for normal scenarios, but in our specific use case we need to have the basic table working as is. Im certain the issue is in the PrimeVue code, because of the comparison with the basic datatable.

Any ideas where I can start to look at fixing it? This is a dealbreaker for using PrimeVue, and we really want to get to the bottom of this, as we like the rest of the PrimeVue component suite and layout templates that we've already purchased.

Code example showing the loading time issues with PrimeVue DataTable:
https://stackblitz.com/edit/arowdh-1pvhu2?file=src%2FApp.vue

Code example showing the much faster load time using a basic HTML table component:
https://stackblitz.com/edit/arowdh-zg6n3q?file=src%2FApp.vue,src%2FBasicTable.vue

I'm even happy to try to diagnose and help fix the issue for PrimeTek, but need some help to find where to start looking for the cause of the slowness.

[redfox05]

Updated stackblitz code examples to include the basic html table as well as the primevue table.

[j0rgedev]

Hey @redfox05. It's kind of uncommon to load 2000+ records without pagination or lazy loading. I guess any datatable library will have this performance problem since it has many features inside of it whereas a basic HTML doesn't. However, I'm aware it can be improved, so you may be interested in the datatable package: https://github.com/primefaces/primevue/blob/master/packages/primevue/src/datatable/DataTable.vue