DataTable: Wrong position of column after reordering

[haasson]

Describe the bug

Hello, there is a bug on columns reordering. See screenshots.

Open the example in documentation https://www.primefaces.org/primevue/datatable/reorder . Try to place Code column between Name and Category. If you release mouse button when your cursor is over the Name category (picture 1) - you'll get an expected result. But if you move your cursor to Category column and the release mouse button - Code column will be placed between Category and Quantity (but helper arrows still points to Name and Category border - see picture 2).

Reproducer

No response

PrimeVue version

3.12.1

Vue version

3.x

Language

ALL

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[nclemeur]

I think this has been fixed: see #2225

[haasson]

@nclemeur thank you for your reply. The description of bug is definitely the same, but as I can see changes do nothing: https://github.com/primefaces/primevue/pull/2614/files I've upgraded a primevue version, and bug is still here. I took a look at the code, and it turns out that dropIndex defines in a wrong way. It is just index of column on which is a cursor: https://github.com/primefaces/primevue/blob/master/src/components/datatable/DataTable.vue#L1284 I guess the center of column should be calculated, like for helper arrows here: https://github.com/primefaces/primevue/blob/master/src/components/datatable/DataTable.vue#L1252 And the final dropIndex value should be calculated considering on which side of column the cursor is.

[tugcekucukoglu]

The indicator's position is so important in this case, not the cursor. DataTable drops the draggable column in front of the indicator position. This is expected behavior. Please check this behavior again.

[haasson]

The indicator's position is so important in this case, not the cursor. DataTable drops the draggable column in front of the indicator position. This is expected behavior. Please check this behavior again.

I attached two pictures. The indicator on the same position on both of them. But the result of moving of column completely different. Result depends on cursor position. If indicator points between Name and Category columns, I expect to see moved columns there. I can record a video, but you can easily check it on your site

[tugcekucukoglu]

Thanks for the update. We'll reconsider it.

[jrebmann]

I have exactly the same problem and have to add that the DataTableColumnReorderEvent actually returns the position of the indicator and not the cursor.

This means the position of the column in the UI does not necessarily match the dropIndex of the event.

This inconsistency just makes it impossible for me to implement a logic based on the reordering.

[tugcekucukoglu]

Could you check the latest version? If the problem still persist, please create a new issue with a reproducer link.