Configure the style of row header

In Risksheet, it’s possible to visually enhance your table by applying custom styles to the row header column. This can be particularly useful for emphasizing important data points such as Risk Priority Numbers (RPN), severity levels, or categories using colored indicators or highlights.

TABLE OF CONTENTS

• Configuration
  • 1. Set the Row Header Renderer
  • 2. Define the Cell Decorator Function
  • 3. Define the CSS Styles

Configuration

To apply styles to the row header, you need to configure the following three sections in your Risksheet JSON configuration:

1. headers.rowHeader.renderer – Defines which rendering function to use for the row header

2. cellDecorators – Contains the JavaScript logic for determining which style should be applied based on data

3. styles – Maps class names to actual CSS style declarations

1. Set the Row Header Renderer

In the headers section, assign a custom renderer to the row header:

  "headers":{
   "rowHeader":{
      "renderer":"rowHeaderRpnNew"
   }
  }

2. Define the Cell Decorator Function

In the cellDecorators section, you create a JavaScript function that applies CSS classes to the row header cell based on the value of rpnNew.

  "cellDecorators":{
    ...
    "rowHeaderRpnNew":"function(info){\n var val = info.item['rpnNew'];\n wijmo.toggleClass(info.cell, 'rowHeadRpn1', val>0 && val <= 150 );\n wijmo.toggleClass(info.cell, 'rowHeadRpn2', val>0 && val > 150 && val <= 250);\n wijmo.toggleClass(info.cell, 'rowHeadRpn3', val>0 && val > 250);}"  
    ...
  }

3. Define the CSS Styles

Next, add style definitions in the styles section to specify how each class should appear visually. In this example, we’re coloring the left border of the row header:

  "styles":{
    ...
    ".rowHeadRpn1":"{border-left: 7px solid #B0D444 !important;}",
    ".rowHeadRpn2":"{border-left: 7px solid #FFFE54 !important;}",
    ".rowHeadRpn3":"{border-left: 7px solid #F3AEAC !important;}",    
    ...
  },

You can modify the styles to include background colors, icons, font styling, or any other visual markers depending on your use case.

Once configured:

• Each row header cell will be dynamically styled based on the rpnNew value

• Users can visually scan the Risksheet and instantly assess the risk level via color-coded indicators

• The approach enhances usability and helps teams prioritize mitigation efforts more effectively

• The rowHeader.renderer must point to a decorator function declared in the cellDecorators section

• Make sure your RPN value (rpnNew) is correctly populated in each work item; otherwise, styling won’t be applied
  
  

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