Grid: making editable columns obvious in 'read' mode

Has anyone come up with a good way to make editable columns obvious in Grids before the user double clicks the line for editting? In ‘read’ mode ( no editting allowed ), all the columns look the same, so kind of hard to tell you can edit anything, let alone which columns you can edit. I tried to look at the CSS in Chrome, but did not see anything special for the column that is editable.

Obviously, I would probably use setCellStyleGenerator, having the generator add a CSS class based on the cellReference.getColumn().isEditable(). That part seems easy. I am more asking how people set off such columns, making them standout to help their users.

Vaadin version: 7.7.13

In case anyone is wondering, technically this is how I handled it. Still waiting for feedback from the powers that be, and would love to hear if other people have a better way, especially with regards to the actual styling.

First of all, the grid related coded:

        grid.setCellStyleGenerator(new CellStyleGenerator() {
            public String getStyle(CellReference cell) {
                if( cell.getGrid().getColumn(cell.getPropertyId()).isEditable())
                    return "editable-column";
                return null;

And now the SCSS change/addition I made:

  .v-grid-cell.editable-column {
      background-color: yellow;
      background-image: -webkit-linear-gradient(top, #ffff88 2%, #ffff00 98%);
    background-image: linear-gradient(to bottom, #ffff88 2%, #ffff00 98%);
      color: black;

I think your approach is correct one. In the end it depends on the application whether it is more appropriate to highlight editable columns like you did, or set the style for non-editable-column (e.g. grey font instead of black font). Typically it is upto what is more common in typical use case of the application, to have few non editable columns or few editable ones, and how the highlighting those match the overal aesthetics.