What is the best way to hint that a table cell is editable?

Question

I have a table with data, with several columns. This is a table used mostly for reading, with the possibility for a user to occasionally adjust some values. Most columns are informative only, and some can be edited (like amounts, quantities, dates, etc). I don't have control over the order, the size, or even the presence of these columns, as it can be customized by the user. The fact of being editable is mostly related to the column, however some rows have data that cannot be edited on some columns.

As it is, the table does its job on the purely functional stage. If you double-click on a cell which is editable, you will enter the editor for it. If you double-click on another one... nothing happens.

I miss a way to indicate that this cell is editable, other than clicking desperately.

What would be the best way to indicate that?

---

Constraints linked to my personal case: (it's better if the answer takes them into account, but not obligatory. The question doesn't have to be too specific)

• Users have the possibility to customize the font (size, style), the text color, the alignment of cells for a given column. So I don't have control over these parameters.
• My table is mostly a report, in which it is possible to adjust values occasionally. This is not the main way to edit them, just a quick shortcut.
• Some columns have conditions on the editable state, so some rows (rare) cannot be edited, even if the column would normally allow it.

Current thoughts:

• A different background color for editable cells would be the first thing to spring to mind. However, since there is no control over the order, size, or else, it's easily giving a very messy result. It's also not obvious on first sight that this is editable.
• Adding an icon to the cell? It would be straightforward, but would easily add a lot of clutter to the table.
• Another possibility would be to indicate the fact that a column is editable, directly in the header. It won't take into account the fact that some cells can't be edited, even in such columns, but since their occurrence is rather rare, this seems like the way to add the information with the least clutter.

Answer 1

I think an icon can be done in a way to not clutter so much. Try using vey low contrast (light gray) icons which are noticeable but not obnoxious. When the user hovers, the icons darken and/or color and a highlight appears around the cell. You say double-clicking activates the edit mode but can a single click do? Or maybe clicking on the icon? I think double click is always difficult to discover but more so on the web where it's not expected.

Also, maybe this is overkill but consider having a tool-tip that appears when hovering over read-only cells saying "This cell is not editable" or something. Conversely, "click to edit" over editable cells.

As always, test your designs, even if it's someone you pull off the street.

Answer 2

Which cell types do you have more? Editable or only readable?

Only readable cells in a form or table are usually marked with light grey font color. This way editable cells would have no special formatting, and editability could be marked by changing the cursor to

Answer 3

Another option would be to show an icon (or another indicator) only on mouse hover. There are a few pros and cons with that approach.

Pro

• adds almost no clutter
• the icon can be very descriptive (more so than a color)
• it's a quite common approach

Con

• it's not immediately visible which cells are editable

This may or may not be an issue though, depending on the workflow of your users.

Answer 4

My suggestion: change the table cell's/inputs border on hover, and change the mouse cursor.

.tableCell :hover {
 border: 2px solid teal;
 cursor: pointer;
}

My 2 cents:

For the sake of increased legibility in a table, you dont want fonts of various strength and sizes. Changing font color, boldness, italics, out of the question as it strains the eyes over long periods of time. Putting an icon or changing the cells background colour is nice, but if you have a whole page full of icons and colours that just mean the cell is editable when people know its editable, it gets annoying, fast, more so if there is a lot of table cells that are editable on the page, and even more so if you are constrained for space.

Answer 5

In this case, one should rely at the same time on the "non-editable" cells whereas, only informative cells will appear in regular font> black color : "Completed" and editable cells will appear in Italic> grey color "Enter Value" (Amounts). I think this is simple, because it does not add up any cul

Answer 6

two decisions of this problem are known to me:

1 use controls for changing values, such as Stepper control (Mac)/ Spin control (Win), input fields & others for hover mode on a row.

2 - use Edit in place mode

Ajax based

JQuerybased

Change the cursor for editable fields

& there is a small nuance in a switching mode to Edit in Place. Single click is in most cases used. Use of double click for those cases when user skills of mouse-possession aren't great is quite admissible also. In my practice I began with double click mode switch that reduced possibility casually to remove the data, for example at copying of values or selecting. The first model is now used.

Answer 7

within the cell use actual inout controls than showing in readonly format if any cell is modified you can highlight it within the session (Optional) this makes user feel that he has more control

Edit button/icons are cool But depends the user persona if the users are accustomed to working with excel sheets, and other manual tables this will come naturally to them