DataTable: Performance on change

[avizuber]

Describe the bug

I'm using a datatable with server-side filtering and sorting. I am handling showing/hiding columns according to the PrimeVue documentation. I've noticed that when I show or hide a column, every row in the table re-renders. This becomes an issue when I am displaying many rows (250 or 500) because it takes about 5 seconds for the show/hide action to display to the user, since the table is waiting for all of the rows to re-render.

I am using v-if to show/hide the columns. Is there a way to memoize or otherwise prevent the rows from re-rendering simply because a column is being shown or hidden? I've tried v-show instead of v-if and I've tried to implement a css-only solution but in all cases the re-rendering happens.

Reproducer

Unfortunately the table contains too much company info to put on Stackblitz

Note: This is running within a Laravel application. The data is being fetched using axios.

PrimeVue version

3.34.0

Vue version

3.x

Language

ES6

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

1. Create a primevue datatable including the show/hide functionality here: https://primevue.org/datatable/#column_toggle
2. Console.log the rows being fed into the table
3. Show/hide a column and see that all of the rows re-render

Expected behavior

Since none of the data is actually changing and the toggle is only impacting UI, I would expect the rows to not re-render. The same issue occurs when selecting rows via checkboxes. If I select one row, all the other rows re-render.

[incutonez]

This might be similar to https://github.com/primefaces/primevue/issues/5207