1

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

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

enter image description here

My current approach

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

enter image description here

What is the right way to do this?

  1. Drag and drop columns in the table itself? How does that work with horizontally scrolling long tables
  2. 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
  3. Show numbers like my current approach? Are there better approaches I havent considered yet

Some direction will be super appreciated

1

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

From the options you have noted down,

  1. 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)

  2. Modal with list (items stacked vertically) - You should use this for narrow screens (if your application is mobile responsive)

  3. 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 -

https://uxdesign.cc/drag-and-drop-for-design-systems-8d40502eb26d

Code example for good drag and drop patterns -

https://github.com/vmware/clarity/issues/1771

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.