Okay so I have a bit of an odd table to achieve and I'm unsure on the the best UI/UX approach to go with.

I have a small table of files, usually at most there would be about 10 files, one of the files must be toggled as a primary file to be used for the category it belongs to. It's possible to toggle old files as active so each row will have a radio select.

The files will also need to be draggable so that they can be dragged to other file categories. So i need a handle bar for dragging of some sort.

Below I have an example table row labelled to it's content:

| Grab Handle | Active Radio | file details | edit delete |

So I'm asking for a few reasons, first is that i know as a general rule it's best practice to put all action buttons on the right so this may even include the active radio however I've seen some tables with selects on the far left except it's odd to have a handle bar and select next to each other. So would there be a better approach to this or is this fine?

2 Answers 2


According to Material Design:

  • Checkbox + Tug - left
  • Actions - right

enter image description here

Of course, you can experiment and try other options.

  • That's a checkbox, not a radio button. As I understand the question the radio is used to mark one file out of the set, so radio button would be appropriate.
    – Martyn
    Commented Oct 23, 2019 at 18:00
  • Sorry, what is the "tug"?
    – Adriano
    Commented Aug 9, 2022 at 23:14
  • Hmm i thought about that element which allow drag&drop
    – Piotr Żak
    Commented Aug 11, 2022 at 9:16

Whenever using HTML table elements, nowadays it's important to both specify and plan for the responsive design decisions that will impact table elements.

This becomes crucial with your issue of how to handle interactive elements within a table that's within a responsive scenario, because all tables need some love to really be consumable on a vertical mobile device viewport!

Since the material design POV is already mentioned here, I'll just sort of add to that. In my experience, thinking mobile first really helps guide how to handle HTML tables beyond what Material Design guidelines state.

So the way I choose to think about this issue is: Only allow preceding interaction columns so long as they allow visibility of data that's going to allow a user to scan as they scroll around in a table on a mobile vertical view device.

This premise sort of forces all but 1-3 interactions to the last columns of the table row.

So I'd say your gut is right on point on this one. Even in the worst case scenarios, which makes it a decent solution IMO.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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