How to color code rows in a table dc.datatable?

Question

On the DC.js github, Stock Market Selection Strategy by Lon Riesberg is listed as an example of using the dc.js library.

He was able to color code the rows, as shown in the image below, which I'm trying to mimic.

enter image description here

See here for my code: http://codepen.io/chriscruz/pen/myaWvR?editors=101

In particular, how would I change the color of the rows so that all rows with the name 'Red' are red, with the name 'Blue' are Blue, and the name 'White' are white.

Javascript:

items = [
            {Id: "01", Name: "Red", Price: "1.00", Quantity: "1",TimeStamp:111},
            {Id: "02", Name: "White", Price: "10.00", Quantity: "1",TimeStamp:222},
            {Id: "04", Name: "Blue", Price: "9.50", Quantity: "10",TimeStamp:434},
            {Id: "03", Name: "Red", Price: "9.00", Quantity: "2",TimeStamp:545},
            {Id: "06", Name: "White", Price: "100.00", Quantity: "2",TimeStamp:676},
            {Id: "05",Name: "Blue", Price: "1.20", Quantity: "2",TimeStamp:777}
        ];

var ndx = crossfilter(items);


var Dim = ndx.dimension(function (d) {return d.Name;})
dc.dataTable("#Table")
  .width(250).height(800)
  .dimension(Dim)
  .group(function(d) {return ' '})
  .size(100)             // number of rows to return
  .columns([
  function(d) { return d.Id;},
  function(d) { return d.Name;},
  function(d) { return d.Price;},
  function(d) { return d.Quantity;},
  function(d) { return d.TimeStamp;},

])
  .sortBy(function(d){ return d.Price;})
  .order(d3.ascending);
dc.renderAll();

HTML:

<table class='table table-hover' id='Table'>
  <thead>
    <tr class='header'>
      <th>ID</th>
      <th>Name</th>
      <th>Price</th>
      <th>Quantity</th>
      <th>Timestamp</th>

    </tr>
  </thead>
</table>

How could this be done considering the only attributes that dc.js has are size, columns, sortBy, and order?

You can use the renderlet call to do this. See github.com/dc-js/dc.js/blob/master/web/docs/… — Ben Lyall
Thanks - that helps a lot, but I can't seem to get renderlet to work - see my code here: codepen.io/chriscruz/pen/myaWvR?editors=101 — Chris
A css and jquery based answer here: stackoverflow.com/questions/28807699/… — Gordon

Gordon Gordon · Accepted Answer · 2015-03-20T17:14:57

You had a syntax error and an unknown symbol in your codepen there. The idea is to use chart.selectAll to grab the rows, and then color them based on the data somehow:

.renderlet(function(chart){
    chart.selectAll('tr.dc-table-row')
         .style('background-color', function(d) { 
             return d ? d.Name : null; 
         })
});

Here's my fork: http://codepen.io/gordonwoodhull/pen/pvqpVV

How to color code rows in a table dc.datatable?

1 Answers