DataTable: Resetting Columns After Reorder Doesn't Work

[incutonez]

Describe the bug

It appears that the ref for my columns is not respected after I have dragged/reordered my columns... it seems like there might be some internal array that doesn't get cleared out or reset to my column definitions. I can reorder the columns programmatically, but once I drag them myself, my ref no longer works.

Reproducer

https://stackblitz.com/edit/3nra9g-lmm2yb?file=src%2FApp.vue

PrimeVue version

3.47.x

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

FireFox

Steps to reproduce the behavior

1. Go to https://stackblitz.com/edit/3nra9g-lmm2yb?file=src%2FApp.vue
2. Drag the Code column before the ID column
3. Click Reset Columns button
4. Notice the ID column does not change positions to before Code

Expected behavior

When the ref for my columns changes, I'd expect the framework to respect that and do any updates that are necessary.

[mertsincan]

Thanks a lot for your report! I set a milestone for it. We'll check before the milestone is released.

[incutonez]

Very much appreciate the work you're doing with this library, so thank you! If y'all are open to community PRs, I was considering poking around the library and adding some helper methods for people that would like to extend the DataTable.

[tugcekucukoglu]

In such a case, you can keep the state and then change the state, or you can do it completely programmatically. DataTable's drag-drop API changes the positions of the columns in the DOM but does not make any changes to the columns object.

The issue is closed for now. A discussion topic can be opened for more user demand.

Thanks for your understanding!

[incutonez]

Huh? I'm confused as to what the solution for this would be.

[luke-z]

@incutonez I just came across this issue myself.

Approach 1 (column names as a key to trigger rerender): Assume there are three columns called id, name, age

They are in an array const columns = ref(['id', 'name', 'age'])

You can then create the key using for example columns.join('_')

Now if you make a change to the columns array, it should create a new key and thus force the datatable to rerender with the reset order. There is a performance impact however on the column drag and drop order, as this also triggers a rerender.

Approach 2: A similar concept, but you use a number as the key and increment it only on an actual reset.

[incutonez]

Hey @luke-z, thanks for your reply! Yeah, I was hoping to not have to trigger a re-render, as it seemed quite expensive, seeing as the DataTable does have perf issues (like this). I appreciate you adding a solution though, I was just hoping for more of an official solution from @tugcekucukoglu.

[luke-z]

@incutonez Yeah that's true :/ This is a workaround and should not be the final solution. However for the moment and (in my opinion) as a column reset shouldn't be an often repeated action, a rerender specifically on resetting shouldn't have that much of an impact on UX/UI.

But it should definitely be followed up by the primevue team in a future release. Hopefully primevue v4 will have some performance upgrades in this area 😎