primefaces / primevue

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

DataTable: reorderable-column not being respected on the selector column, column duplicates while dragging #5633

Open Magiczne opened 5 months ago

Magiczne commented 5 months ago

Describe the bug

  1. reorderable-column is not being respected on the column. The data-p-reorderable is always true.
  2. additionaly you can sometimes still reorder the selector column, it is not deterministic, but happens only if you have filter row visible
  3. additionally when you reorder different columns the selector column will be duplicated in random places.

The problem seems to be located in the DataTable.vue file inside computed columns:

columns() {
            const cols = this.d_columns.get(this);

            if (this.reorderableColumns && this.d_columnOrder) {
                let orderedColumns = [];

                for (let columnKey of this.d_columnOrder) {
                    let column = this.findColumnByKey(cols, columnKey);

                    if (column && !this.columnProp(column, 'hidden')) {
                        orderedColumns.push(column);
                    }
                }

                // ========
                //   Here is the bug. The filter can return the same column as the first one,
                //   screenshot below.
                // ========
                return [...orderedColumns, ...cols.filter((item) => orderedColumns.indexOf(item) < 0)];
            }

            return cols;
        },

Left is orderedColumns right is the cols filter image

Reproducer

https://stackblitz.com/edit/omfayv?file=src%2FApp.vue

PrimeVue version

3.50

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

any

Steps to reproduce the behavior

Go to the stackblitz.

  1. Try to reorder different columns
  2. Try to reorder selector columm

Attaching video to illustrate behavior.

screen-capture.webm

Expected behavior

Everything working as expected

Akiira-UwU commented 2 months ago

I have the same problem with reorder + expander, any update to communicate ?

os-tohe commented 2 months ago

I was just about to report this same column duplication bug, thanks for the great issue! The same duplication bug is still happening in PrimeVue v4.0.1.