title: Polymer, paper-datatable styling of rows
body: <p>I'm trying to colour the rows of paper-datatable
  using the attribute <a href="http://david-mulder.github.io/paper-datatable/components/paper-datatable/docs/api.html?datatable#customRowStyle" rel="nofollow">customRowStyle</a></p>
  
  <p>This <a href="http://plnkr.co/edit/wNewjFnTEjEACwzAvwSd?p=preview" rel="nofollow">Plunk of paper-datatable</a> is working, rows are colored, but it's not enclosed as separate Polymer element.</p>
  
  <p>I need to enclose  paper-datatable in separate element.</p>
  
  <p>Need some help to fix this:
  how to make <code>customRowStyle(item)</code> to get called on table render and pass the <code>item</code>?</p>
  
  <pre><code> &lt;paper-datatable data="{{data}}" 
                           custom-row-style="{{generateRowCss}}"
                           on-row-tap="row_tap"&gt;
  
              &lt;paper-datatable-column header="title" property="title"&gt;&lt;/paper-datatable-column&gt;
              &lt;paper-datatable-column header="Calories" property="calories"&gt;&lt;/paper-datatable-column&gt;
              &lt;paper-datatable-column header="Fat (g)" property="fat" &gt;&lt;/paper-datatable-column&gt;
  
  &lt;/paper-datatable&gt;
  
  ...
  
  generateRowCss: function (item) {
                  console.log('theming_2 generateRowCss:');
                  var levels = ['#FFFFFF', '#FFEBEE', '#FFCDD2', '#EF9A9A'];
                  var min = 150;
                  var max = 450;
                  var level = Math.floor((item.calories - min) / (max - min) * levels.length);
                  return 'background:' + levels[level] + ';';
  },
  </code></pre>
  
  <p>EDIT:
    <a href="http://plnkr.co/edit/k4B2H0whGXROcvXnbx9y?p=preview" rel="nofollow">Plunk</a> with @a1626 solution.</p>