Polymer & Vaadin-Grid element migration from cell renderer

Flow
1

In Polymer 1.0 and Vaadin-grid v1 I was using a cell renderer along the following lines to add an icon based on the value of the data:

grid.columns[6]
.renderer = function(cell) {
      if (cell.data < 0){
        cell.element.innerHTML =  Math.abs(cell.data) + '<iron-icon icon="arrow-downward" style="color: red"/>';
      }
      else if (cell.data > 0) {
        cell.element.innerHTML = cell.data + '<iron-icon icon="arrow-upward" style="color: green"/>';
      }
      else {cell.element.innerHTML = '<iron-icon icon="settings-ethernet" style="color: #ffcc00"/>';}
    };

Of course the migration to vaadin-grid 2 means no more renderer function and recommendation to use templates instead.What would be the most efficient way to achieve this?
I was thinking of maybe a custom element with a bunch of dom-ifs but that seems a bit hamfisted.

Any help appreciated - I am learning this as I go!

2

Hi Steve,
Dom-if is one option, but as you mentioned, it might be a little clumsy for this case. Here’s the same thing implemented with computed bindings: https://jsbin.com/lagusuxure/edit?html,output

3

Thankyou so much for your help Tomi - and for tactfully pointing me in the right direction :wink:
I also appreciate you taking the time to code up an example for me.