we're designing a web application in material design and we have an editable table there - something like this:

Copied from material design specification

Any suggestion on how to indicate the editable fields, if not all columns are editable? Let's say that in this example Protein and Comments would be editable - how should we visualize this?

I found this suggestion in Material design specification, but what if more than one column in a row is editable? The table would become cluttered with icons if we place them into each editable cell.

Material design - editable table

Would it be better to allow editing only for the whole row?


4 Answers 4


If you like to keep the table clean, show only the edit icon on the hovered cell: You can specify which cells are editable by showing the icon or not. [enter image description here
Keep text selectable:
enter image description here
And add a click handler on the edit icon itself:
enter image description here

I would recommend not using inline editing, since column widths can be small and not easy to edit. Use a pop-up/-over or modal or something like this:

enter image description here

  • The spec page shows diagrams of how to do "small" or "large" popover edit dialogs.
    – Coderer
    Commented Oct 25, 2017 at 12:21
  • 1
    I'm surprised this is the best vote... Not that great of a solution and very inefficient.
    – insidesin
    Commented Oct 30, 2017 at 0:59
  • 2
    @insidesin It would be much better to point out why do you think it is not a great solution. Even better if you provide what's a better solution would be and why.
    – Mo'ath
    Commented Jul 23, 2019 at 17:45

An alternative could be inline editing on hover. Showing just the editable fields.enter image description here

  • I think showing the inputs on hover is cleaner and more elegant than showing an icon for each field. The material style for the fields would be nice, but this was my idea too. Commented Oct 24, 2017 at 4:07
  • It is cleaner yes but more importantly it is more efficient as users can identify editable fields at a glance, without the need to hover each field to find out if it is editable or not.
    – Mo'ath
    Commented Jul 23, 2019 at 17:59

The material design suggestion seems okay. One edit icon per row which makes every field in that row editable. You could add "Edit row" to make it more clear what will happen.

For Example

  • But what if not all columns are editable? How do you distinguish editable vs. non-editable fields if material design fields have no outline?
    – Jaroslav M
    Commented Oct 18, 2017 at 6:11
  • This is the best method I see here. One edit icon in the same place every time, but content is editable if conditions are met. This needs good reasoning on why fields aren't editable though... that's the next problem.
    – insidesin
    Commented Oct 26, 2017 at 1:58
  • @insidesin you can disable that text field for editing.
    – NB4
    Commented Oct 27, 2017 at 13:23
  • Yeah. So you need good reasoning on why those are disabled.
    – insidesin
    Commented Oct 30, 2017 at 0:58
  • I want similar, will you provide me the stackblitz link, I m integrating angular mat table Commented Mar 4, 2020 at 10:22

While tables in Material Design usually do not have any kind of outlines, in your case a good idea would be to use editable text field UIs in the places where you wish to indicate that fields are possible to modify. Below are two images, the first one showing a field without text inside (and with a placeholder), and the second one with text entered. To make everything more legible, I would recommend removing the upper label in the filled in text field (see image two), since the label is already present at the top of the table (so the filled in field looks just like the empty one but with more visible black text to differentiate the other states).

enter image description here

enter image description here

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