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

To improve visual clarity and highlight important values, you may want to define your custom header or cell styles in Risksheet — whether static (fixed formatting) or dynamic (based on cell content).

TABLE OF CONTENTS

• Configuration
• CellDecorator Function Parameter

Configuration

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

Green = RPN < 150

Yellow = RPN < 250

Red = RPN > 250

To configure the styles as described below

1. Define the cellRenderer function "rpn"

...
"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 one parameter (here, it is called info) as input.

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 below). Do not set the inline styles directly, as the table cells are reused as you scroll the table.

For any assistance, please don’t hesitate to reach out by submitting a ticket here.