Best approach to having a sort, select and set of action buttons on a table row

Question

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?

Answer 1

According to Material Design:

• Checkbox + Tug - left
• Actions - right

Of course, you can experiment and try other options.

Answer 2

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.