Set the background color of a table cell based on the data contained in the row or cell

#1

We have a set of columns that can either be “red” or “green” if the data is within a certain range or not. So we would like to color in the background of the cells based on data.

In datatables, this functionality is achieved using rowCallback and adding a css class to the cell, then the css class contains the color modification.

How can this be achieved in c3 ui?

0 Likes

#2

Found out something on the row that might help, but still need one that is per column.

rowColorConditionals : Object
The conditions for coloring rows successful matching of a row-color conditional will override any column-color conditionals @example { field: ‘plan.status.value’, thresholds: [ { comparator: ‘==’, comparisonValue: ‘success’, conditionalValue: ‘gray’ } ] }

I cant seem to find column-color conditionals in the docs though.

0 Likes

#3

In ui/content/js/customCode/anyFileName.js, add the code for a function as below:

(function() {
    var helpers = C3.script.helpers;
    _.extend(helpers, {
        doSomeFunc: function(status) {
            return "<div class='myCSSClass'>1.0</div>";
        }
    });
})();

In the kendo grid column, specify a format attribute with value

"format": {
                 "funk": "doSomeFunc"
 }

This will add a div with styling defined by myCSSClass

Which can be defined with a background color and other styling if desired:

.myCSSClass{
  border-bottom: 3px solid white !important;
  background-color: #DCEDC8 !important;
  color: black !important;
}
2 Likes

closed #4
0 Likes