3

When working with tables, I prefer to place actions that are specific to the row (i.e. edit, delete, etc.) within the row. Sometimes I use an action menu, sometimes it's an edit or delete icon. enter image description here

Within the projects I've been part of, I've always seen these actions placed at the far-left of the table. In a recent discussion with a colleague, it was suggested to put the actions on the far right-side of the grid. I've never seen this before, and it felt "odd" to place them on the right-side of the table.

Is there reasoning or justification to place "action" buttons/links in a table to the left or right side?

Improve this question
1
  • It’s not really a “data-table” if it contains actions.
    – Crissov
    Commented Jan 4, 2016 at 2:34

3 Answers 3

Reset to default
4

When you're displaying tabular data, often the first column indicates the primary field and drives default sorting order because table is read left->right with more important data columns on the left side.

Since the action buttons are not data, general UI convention is to put the on the right side. You can do a google image search for "web application table design" and in vast majority of the cases, actions are on the right side.

General exception to this convention is when placing controls for checkbox and tree-hierarchy drilldowns; they are almost always on the left.

Improve this answer
1
  • I totally agree with this answer.
    – Zoe K
    Commented Jan 3, 2016 at 6:13
4

It depends ...

The question you need to be able to answer is:

As a user, do I need to scan the entire row before I can make an educated decision if the row I am looking at is the row I want to "edit" or "delete"?

General Thoughts

If the amount of the information an end-user needs to scan is fairly small and by only looking at the "Address" column you can make that decision, then having actions on the left hand side makes the most sense. You don't want to force the end-user to follow the entire row to act on that item if they decided after looking at very first column.

On the other hand, if an end-user has to scan the entire row to decide, then actions on the right hand side makes the most sense.

Important

To complicate things even more, your app/website should NOT use different design patterns around table row actions. Row actions should be located in a consistent place so that the end-user won't have to relearn the pattern from page to page.

Examples

Salesforce CRM Salesforce Example

Magento eCommerce Admin Panel Magento Example

Improve this answer
1
  • I personally agree with this wholeheartedly. Although its painful because my company is banging into your "Important" notice. Our legacy code has everything on the left and our new pages are replacing the old pages piecemeal. This means that were being forced to put the action buttons on the left simply because that bad standard was propagated in the old code. Short of a complete rewrite of all the old code we can't avoid this. Really annoying
    – Bill Garrison
    Commented Jun 2, 2016 at 21:02
0

Stick to far left. That way if your website or app is responsive the actions will always be available without horizontal scrolling. Especially given your example image and the content you are displaying.

Improve this answer
1
  • While I am not saying that action buttons SHOULDN'T be on the left, this is a horrible reason to do so. If the site is responsive and the edit / delete buttons are on the left then they will end up at the top which means they have to scroll PAST them....determine if its the right item to modify and then scroll BACK to the actions.
    – Bill Garrison
    Commented Jun 2, 2016 at 21:00

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.