13

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?

Thanks.

10
+50

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 Oct 25 '17 at 12:21
  • 1
    I'm surprised this is the best vote... Not that great of a solution and very inefficient. – insidesin Oct 30 '17 at 0:59
4

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. – Madalina Taina Oct 24 '17 at 4:07
3

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 Oct 18 '17 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 Oct 26 '17 at 1:58
  • @insidesin you can disable that text field for editing. – NB4 Oct 27 '17 at 13:23
  • Yeah. So you need good reasoning on why those are disabled. – insidesin Oct 30 '17 at 0:58
3

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

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.