title: Datatable (JS) not working with list in R (callback javascript)
body: <p>I am trying to plot a table where the cells are colored by:</p>
  <ul>
  <li><p><strong>RED</strong> when the value of the cell is lower than the mean of the column</p>
  </li>
  <li><p><strong>LIGHTGREEN</strong> when the value of the cell is greater than the mean of the column</p>
  </li>
  </ul>
  <p>And scaled based on how distant the cell value is from the lowest (or highest) value.</p>
  <p>I could already figured out how to do it using the data altogether, i.e., using the mean of the whole table, using the max of the whole table, min of the whole table, and so on.</p>
  <p>The code is <strong>not</strong> distinguishing by the mean of the column (using the mean of the whole cells, entire table):</p>
  <pre class="lang-r prettyprint-override"><code>library(shiny)
  library(DT)
  
  ab &lt;- as.data.frame(cbind(matrix(round(runif(50, -1, 1), 3), 10), sample(0:1, 10, TRUE)))
  
  
  vals &lt;- list()
  
  vals$rm = mean(rowMeans(ab))
  vals$rr = abs(max(ab)) + abs(min(ab))
  vals$r1 = abs(max(ab)) - mean(rowMeans(ab))
  vals$r0 = abs(min(ab)) - mean(rowMeans(ab))
  
  string &lt;- paste0(&quot;function(row, data) {&quot;,
                   paste(lapply(1:ncol(ab),function(i){
                     paste0(&quot;var value=Math.abs(data[&quot;,i,&quot;]);
                                          var value2=data[&quot;,i,&quot;];
                                         if (value!==null){
                                         if(value2 &lt; &quot;,vals$rm,&quot;){
                                         $(this.api().cell(row,&quot;,i,&quot;).node()).css({'background':isNaN(parseFloat(value)) || value &gt; &quot;,vals$rr,&quot; ? '' : 'linear-gradient(90deg, transparent ' + (1 - (&quot;,vals$rm,&quot; - value2)/&quot;,vals$rr,&quot;)* 100 + '%, red ' + (1 - (&quot;,vals$rm,&quot; - value2)/&quot;,vals$rr,&quot;) * 100 + '%)','background-size':'98% 88%','background-repeat':'no-repeat','background-position':'center'});
                                         }else{
                                         $(this.api().cell(row,&quot;,i,&quot;).node()).css({'background':isNaN(parseFloat(value)) || value &gt; &quot;,vals$rr,&quot; ? '' : 'linear-gradient(90deg, transparent ' +  (1 - (-&quot;,vals$rm,&quot; + value2)/&quot;,vals$rr,&quot;) * 100 + '%, lightgreen ' +   (1 - (-&quot;,vals$rm,&quot; + value2)/&quot;,vals$rr,&quot;)* 100 + '%)','background-size':'98% 88%','background-repeat':'no-repeat','background-position':'center'});
                                         }
                                         } &quot;) 
                   }),collapse=&quot;\n&quot;),
                   &quot;} &quot;)
  
  datatable(ab, options = list(rowCallback=JS(string)))
  </code></pre>
  <p><a href="https://i.stack.imgur.com/J35PR.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J35PR.jpg" alt="example" /></a></p>
  <p>The code that I wished was working:</p>
  <pre class="lang-r prettyprint-override"><code>
  vals &lt;- list()
  
  for(g in 1:(ncol(ab))) vals$rm[g] = mean((ab[,g]))
  for(g in 1:(ncol(ab))) vals$rr[g] = abs(max(ab[,g])) + abs(min(ab[,g]))
  for(g in 1:(ncol(ab))) vals$r1[g] = abs(max(ab[,g])) - mean((ab[,g]))
  for(g in 1:(ncol(ab))) vals$r0[g] = abs(min(ab[,g]) - mean((ab[,g])))
  
  string &lt;- paste0(&quot;function(row, data) {&quot;,
                   paste(lapply(1:ncol(ab),function(i){
                     paste0(&quot;var value=Math.abs(data[&quot;,i,&quot;]);
                                          var value2=data[&quot;,i,&quot;];
                                         if (value!==null){
                                         if(value2 &lt; &quot;,vals$rm[i],&quot;){
                                         $(this.api().cell(row,&quot;,i,&quot;).node()).css({'background':isNaN(parseFloat(value)) || value &gt; &quot;,vals$rr[i],&quot; ? '' : 'linear-gradient(90deg, transparent ' + (1 - (&quot;,vals$rm[i],&quot; - value2)/&quot;,vals$rr[i],&quot;)* 100 + '%, red ' + (1 - (&quot;,vals$rm[i],&quot; - value2)/&quot;,vals$rr[i],&quot;) * 100 + '%)','background-size':'98% 88%','background-repeat':'no-repeat','background-position':'center'});
                                         }else{
                                         $(this.api().cell(row,&quot;,i,&quot;).node()).css({'background':isNaN(parseFloat(value)) || value &gt; &quot;,vals$rr[i],&quot; ? '' : 'linear-gradient(90deg, transparent ' +  (1 - (-&quot;,vals$rm[i],&quot; + value2)/&quot;,vals$rr[i],&quot;) * 100 + '%, lightgreen ' +   (1 - (-&quot;,vals$rm[i],&quot; + value2)/&quot;,vals$rr[i],&quot;)* 100 + '%)','background-size':'98% 88%','background-repeat':'no-repeat','background-position':'center'});
                                         }
                                         } &quot;) 
                   }),collapse=&quot;\n&quot;),
                   &quot;} &quot;)
                     
  datatable(ab, options = list(rowCallback=JS(string)))
  </code></pre>