I'm trying to colour the rows of paper-datatable using the attribute customRowStyle
This Plunk of paper-datatable is working, rows are colored, but it's not enclosed as separate Polymer element.
I need to enclose paper-datatable in separate element.
Need some help to fix this:
how to make customRowStyle(item)
to get called on table render and pass the item
?
<paper-datatable data="{{data}}"
custom-row-style="{{generateRowCss}}"
on-row-tap="row_tap">
<paper-datatable-column header="title" property="title"></paper-datatable-column>
<paper-datatable-column header="Calories" property="calories"></paper-datatable-column>
<paper-datatable-column header="Fat (g)" property="fat" ></paper-datatable-column>
</paper-datatable>
...
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] + ';';
},
EDIT: Plunk with @a1626 solution.