Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Magiczne opened this issue Apr 23, 2024 · 0 comments
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible

Comments

@Magiczne
Copy link
Contributor

Magiczne commented Apr 23, 2024

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

@Magiczne Magiczne added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Apr 23, 2024
@Magiczne Magiczne changed the title DataTable: reorderable-column not being respected on the selector column DataTable: reorderable-column not being respected on the selector column, column duplicates while dragging Apr 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible
Projects
None yet
Development

No branches or pull requests

1 participant