Best approach to having a sort, select and set of action buttons on a table row
User Experience Asked on October 31, 2021
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
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.
Answered by Matt McT on October 31, 2021
According to Material Design:
- Checkbox + Tug - left
- Actions - right
Of course, you can experiment and try other options.
Answered by Piotr Żak on October 31, 2021
Add your own answers!
Ask a Question
Get help from others!
Recent Answers
- Jon Church on Why fry rice before boiling?
- haakon.io on Why fry rice before boiling?
- Lex on Does Google Analytics track 404 page responses as valid page views?
- Peter Machado on Why fry rice before boiling?
- Joshua Engel on Why fry rice before boiling?
Recent Questions
- How can I transform graph image into a tikzpicture LaTeX code?
- How Do I Get The Ifruit App Off Of Gta 5 / Grand Theft Auto 5
- Iv’e designed a space elevator using a series of lasers. do you know anybody i could submit the designs too that could manufacture the concept and put it to use
- Need help finding a book. Female OP protagonist, magic
- Why is the WWF pending games (“Your turn”) area replaced w/ a column of “Bonus & Reward”gift boxes?