Which of these is the right way to let people reorder columns in a table

Question

I have a data table where I present live sensor data for comparison.

There are atleast 10 columns on the screen at all times and the user can add upto 100 columns by toggling them
Some columns are fixed and cannot be reordered while others take part in reordering

My current approach

I am opening a modal inside which each visible column has a number assigned to it
Editing the numbers would change the column order
Fixed header numbers cannot be changed

What is the right way to do this?

Drag and drop columns in the table itself? How does that work with horizontally scrolling long tables
Open a modal and show all columns in a list format and let people drag and drop items in that list. The list will grow vertically and the modal will need a scroll bar beyond say 20 columns
Show numbers like my current approach? Are there better approaches I havent considered yet

Some direction will be super appreciated

Arriving From The Sky · Accepted Answer · 2019-01-22 04:16:49Z

I think Drag and Drop is a common and intuitive approach for re-ordering of grid elements.

From the options you have noted down,

Drag and drop columns in the table itself - You can use this with desktop and get away with it, even if there is a scroll bar because unfortunately thats a limitation with data grids, if you need all columns visble (like in your case)
Modal with list (items stacked vertically) - You should use this for narrow screens (if your application is mobile responsive)
Show numbers like my current approach - I think the issue with this is that the users have to keep a track of what numbers they have entered in each input field. Also it can lead to duplication and that will involve validation checks etc. I think that is making the process a bit complicated.

However, you need to be considerate about the user's experience with drag and drop. Drag and drop interactions are often overlooked or go unnoticed.

Take a look at thie article for a detailed analysis of drag and drop patterns -

Code example for good drag and drop patterns -

thank you very much i ll have a look at the articles and code sample, if it isnt too much to ask, have you come across any other patterns for reordering columns — PirateApp, Commented Jan 22, 2019 at 4:45
Sure no worries! Maybe give this a look - ux.stackexchange.com/questions/112415/… — Arriving From The Sky, Commented Jan 22, 2019 at 4:50

1 Answer 1