Configure cell/column styles (colors, fonts, ...)

You may want to define your custom header or cell styles - static or dynamic based on the content.

Config file

Please follow this article, to learn where is the configuration file located: Adjust risksheet configuration - download/upload risksheet.json

Example: RPN Number

A reference example is the RPN columns where the cell color is set based on RPN value 

Green = RPN<150

Orange = RPN < 250

Red = RPN > 250

Configuration

To configure the styles as describe bellow

1. point a column to a cell renderer function - see "columns" : [ ... { ... "cellRenderer":"rpn" ...} ...
2. define the cell renderer function - see  "cellDecorators" : { "rpn" : "function ...
3. define the CSS styles - see "styles" : { ".rpn1" : "{background ...

...
"cellDecorators":{
    "rpn":"function(info){\n var val = info.value;\n $(info.cell).toggleClass('rpn1', val>0 && val <= 150 );\n $(info.cell).toggleClass('rpn2', val>0 && val > 150 && val <= 250);\n $(info.cell).toggleClass('rpn3', val>0 && val > 250);}",
    ...  
  },
  "styles":{
    ".rpn1":"{background-color: #B0D444 !important;}",
    ".rpn2":"{background-color:#FFFE54 !important;}",
    ".rpn3":"{background-color: #F3AEAC !important;}",
    ...
  },
  "columns": [
    ...
    {
      "headerGroup":"Set ranking",
      "headerCss":"headSetRanking",      
      "header": "RPN",
      "filterable":true,      
      "bindings": "rpn",
      "type": "int",
      "cellRenderer": "rpn",
      "width": 60,
      "level": 2,
      "formula":"commonRpn"
    },
...

CellDecorator Function Parameter

In the example above you can see that the cell decorator function takes as an input one parameter (here it is called info).

This parameter exposes:

• info.item - a data array, that holds the values of rows. So in your function, you can access the row (item) values by calling info.item[column.id]
• info.cell - a HTML DOM element, that you shall use to set the style name (see section Styles bellow). Do not set the inline styles directly, as the table cells are reused as you scroll the table.