I'm struggling with a decision here..

What is the best place (and why) to put the edit button on a table if the edit mode will act only in partial content of that row?

last, first columns or on the cell itself

edit mode example


It depends whether your users are entering large change sets, or are making small one-off changes.

I have previously developed a table that had an "edit mode" that you had to switch on. Once in edit mode all the editable fields of the selected row became text fields, so it was obvious which content you could change. Changed fields were highlighted in green, red for deleted rows, and you could filter to review the change set before saving. This approach is nice for large change sets, and for users who are mostly viewing data and want to feel confident they won't accidentally change something.

  • Thanks for the answer Franchesca! do you know if exist a pattern for where to put the edit button? on the first column or the last column of the table? – Luana Favetta Groppo Apr 12 '16 at 17:33
  • 1
    @LuanaFavettaGroppo I would say the last column as opposed to the first column. People read from left to right, so they read the row data first then decide whether to edit it. Generally this design pattern is implemented to only shows the edit button on the selected / mouse over row, not on the whole table at once. It is a better way to go than my above answer if your interface is a web page. – Franchesca Apr 12 '16 at 18:07

The trend I've seen of late is to place the edit button as close as possible to the thing you're editing (but only when you're focused on the element).

There's at least a few web apps I use that I can think of where hovering over a field presents a pencil icon, and from there I can click or double-click to modify the value for that one field. Obviously, the apps use different types of layouts, but you can experiment with the layout and see what works better.

A few apps use inline editing directly (shown below), while others display a modal input that overlays the page. The inline variety is my preference, as you don't need to move your mouse/finger very far to do quick edits.


download bmml source – Wireframes created with Balsamiq Mockups

This design works well if you're expecting a small number of edits or you want to give your users a quick way to edit single values. Of course, if you expect they'll need to edit multiple values per row at once, then putting the button in the first column would probably be best, at least in languages that read left-to-right. This is doubly true if there's a large amount of data (to the extent where the user might need to scroll right to find the edit button).

In addition to buttons, make sure that, if the device you're targeting has a keyboard, that ESC and Enter/Return are wired to the cancel and save/edit buttons (respectively), so that users don't actually need to even use the mouse if they don't want to, or have accessibility needs.


It possibile you open an modal to inform your user about this inputs they can change only clicking them and only appear the save button when they change this, using a mini animation in this case to better explain about this option.

I think it be better because is like you do on paper, get the eraser and change that value.

Instead add an single button you add a edit button to eache value they can change open a doubt to your user because they saw only one save button.

  • Your suggestion is to go to the in row clicking, without the pencil? I'm struggling with where to put the editing link/button/hover.. – Luana Favetta Groppo Apr 12 '16 at 17:06
  • Yes, when the user hover mouse for 2seconds some script recognize this and open this value to edit, only save and cancel button staying at right to remember this action, but like a backup when the user click outside this input show a modal with message to remember this action they doing. – Rick Benetti Apr 12 '16 at 18:46

First, I'd discard the one with the edit button on the left since it goes against the natural of flow of reading a row and then deciding to edit it.

Then you should analyze:

  • How many editable columns the tables has?
  • How often will users edit just one input from the same row at the same time?
  • How often will users edit several inputs from the same row at the same time?
  • How often will users edit several inputs from different rows at the same time?

Depending on the answer of these I would choose a different option between input, row or column editing.

For me most of the time row editing is what works best because it's a middle point that doesn't annoy users making them click in every input they want to edit but neither edit everything thus loosing the track of everything that was edited. This is a example:

enter image description here

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.