Ngx-datatable: Drag and drop reordering of columns should allow for dropping only and not swapping

[SlapBassist]

Currently dragging and dropping columns swaps the columns, that is the dragged column and the column dragged into, with each other. Instead, there should be a way to allow column dragging so that it only drops it into position and shifts the other columns to the right.

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior
Currently when you drag a column to the position of another column, it swaps the columns, so if you drag a column in a 10 column grid, that is at the very right of the grid, to a position in the beginning, it will swap the columns instead of simply shifting the first column to the right and placing the dragged column in its place.

Expected behavior
See above.

Reproduction of the problem
See any of the demo apps.

What is the motivation / use case for changing the behavior?
Usually column drag and drop does not swap columns but instead shifts columns.

Please tell us about your environment:
All

• Table version: 0.8.x
  Latest

• Angular version: 2.0.x
  4.x

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X all

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  TypeScript

[amcdnl]

do you have any examples of other tables doing this?

we do this resizing because of the width distribution, but i think we could tweak this.

[yuramamchur]

hi, I have the same situation. It will be great if we can change columns order, without swaping.
Something like in this example

[jasas1]

We also would prefer this functionality, i.e. shifting columns. As for examples of this behavior: Excel, Numbers, Google Sheets, & Airtable shift columns with drag and drop.

[gabe-axian]

+1 for this feature. We are building an application that needs as close to "excel" table functionality as possible and the current "swapping" of columns is not making the client happy.

[spinachandkale]

+1

[CodeGains]

+1

[bergermanuel]

We're currently working on a project where we needs this functionality of reordering columns and not swapping them. We decided to implement it by ourselves and created a PR. We hope it will be merged.

[healthymorty]

+1

[Matmo10]

+1

Most table's I've observed over the years shift columns instead of swapping.

[pratham4]

+1
Even we need the same feature
We are actually migrating from ASP.Net MVC to Angular 5. The previous datatable inserts and now swipes and users wish the same feature in the new migration. Thus we need this feature to keep user experience the same.

[mfchk]

+1

[healthymorty]

For those who need it immediately @bergermanuel fork works great.

[CwkMaster]

Hi, everyone!
I had that same problem. I did this(Angular5, ngx-datatable 11.1.7):

In html:

   <ngx-datatable  [columns]='columns' 
    (reorder)="reorderColumn($event)" ">  

In TS:

reorderColumn(event) {
        let i = 0;
        let newOrderedColumns = [];
        for (let col of this.columns) {
            if (event.newValue == i) {
                newOrderedColumns.push(event.column);
                newOrderedColumns.push(col);
            } else if (event.prevValue == i) {

            } else {
                newOrderedColumns.push(col);
            }
            ++i;
        }
        this.columns = newOrderedColumns;
        this.saveColumnOrder(); //save in Local Storige
    }

[tai4hang]

+1

[jolinazou]

+1

[MichaelLing2013]

+1

[edmond-io]

+1. We prefer having an option to shift columns instead of direct swapping.

[tommykg]

+1 , prefer shift columns

[DouglasEleuterio]

+1

[joeveiga]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.