Create Custom Renderers - Nextedy Documentation

Step 1: Define a Cell Decorator Function

Cell decorators are JavaScript functions registered in the cellDecorators section of risksheet.json. Each function receives an info object and uses jQuery to toggle CSS classes on the cell element based on data values. The info object provides:

Property	Type	Description
`info.cell`	`HTMLElement`	The DOM element of the cell being rendered
`info.item`	`object`	The current row’s data object (access fields via `info.item['fieldId']`)
`info.value`	`any`	The cell’s current value

Add a decorator to the cellDecorators section:

{
  "cellDecorators": {
    "rpn": "function(info){ var val = info.value; $(info.cell).toggleClass('boldCol', true); $(info.cell).toggleClass('rpn1', val > 0 && val <= 150); $(info.cell).toggleClass('rpn2', val > 150 && val <= 350); $(info.cell).toggleClass('rpn3', val > 350); }"
  }
}

This example applies CSS classes based on RPN value thresholds:

boldCol — always applied (bold text)
rpn1 — applied when value is 1 to 150 (low risk)
rpn2 — applied when value is 151 to 350 (medium risk)
rpn3 — applied when value exceeds 350 (high risk)

You can define as many named decorators as needed in the cellDecorators object. Each column can reference a different decorator via the cellDecorator property.

Step 2: Define Matching CSS Styles

Create CSS class definitions in the styles section of risksheet.json to define the visual appearance applied by your decorators. Style names must be valid CSS selectors prefixed with a dot:

{
  "styles": {
    ".boldCol": "font-weight:600;",
    ".rpn1": "background-color: #eaf5e9 !important;color: #1d5f20 !important;",
    ".rpn2": "background-color: #fff3d2 !important; color: #735602 !important;",
    ".rpn3": "background-color: #f8eae7 !important;color: #ab1c00 !important;"
  }
}

CSS Class	Risk Level	Background Color	Text Color	Description
`.boldCol`	All	—	—	Bold font weight for emphasis
`.rpn1`	Low (1—150)	`#eaf5e9` (light green)	`#1d5f20` (dark green)	Acceptable risk
`.rpn2`	Medium (151—350)	`#fff3d2` (light yellow)	`#735602` (dark yellow)	Review recommended
`.rpn3`	High (>350)	`#f8eae7` (light red)	`#ab1c00` (dark red)	Mitigation required

Always use !important on background-color and color properties in cell decorator styles. Without !important, the grid’s default cell styling may override your conditional formatting.

Step 3: Apply Decorators to Columns

Reference your decorator in the column configuration using the cellDecorator property. This activates the decorator for all cells in that column:

{
  "columns": [
    {
      "id": "rpn",
      "binding": "rpn",
      "header": "RPN",
      "formula": "commonRpn",
      "cellDecorator": "rpn"
    },
    {
      "id": "rpnNew",
      "binding": "rpnNew",
      "header": "RPN (New)",
      "formula": "commonRpnNew",
      "cellDecorator": "rpn"
    }
  ]
}

The same decorator can be applied to multiple columns. In the example above, both the initial RPN and the revised RPN columns use the same rpn decorator for consistent color coding.

Step 4: Configure a Row Header Renderer

Use headers.rowHeader.renderer to apply conditional styling to the row header (the leftmost column showing row numbers). The renderer references a decorator name from the cellDecorators section:

{
  "headers": {
    "rowHeader": {
      "renderer": "rowHeaderRpnNew"
    }
  },
  "cellDecorators": {
    "rowHeaderRpnNew": "function(info){ var val = info.item['rpnNew']; $(info.cell).toggleClass('rpn1', val > 0 && val <= 150); $(info.cell).toggleClass('rpn2', val > 0 && val > 150 && val <= 350); $(info.cell).toggleClass('rpn3', val > 0 && val > 350); }"
  }
}

The row header renderer accesses info.item to read any property from the row’s work item. In this example, it reads the revised RPN value (rpnNew) to color the row header based on the post-mitigation risk level, providing at-a-glance risk assessment for each row.

Row Header Rendering Flow
headers.	cellDecorators.	styles.
rowHeader.	--->	rowHeaderRpnNew	--->	.rpn1 / .rpn2
renderer	reads info.item	.rpn3
Config names Function evaluates CSS classes
the decorator row data values applied to cell

Step 5: Register Custom Cell Renderers

For complete control over cell display (replacing the default rendering entirely, not just adding CSS classes), register custom cell renderer functions. Custom renderers differ from cell decorators:

Feature	Cell Decorators (`cellDecorators`)	Custom Cell Renderers (`cellRenderers`)
Purpose	Add/remove CSS classes	Replace cell HTML content
Registration	`cellDecorators` in `risksheet.json`	`cellRenderers` in `risksheet.json`
Column property	`cellDecorator`	`cellRenderer`
Parameters	`info` (cell, item, value)	grid, cell, item, value
Comparison mode	Disabled during comparison	Disabled during comparison

Custom renderers receive four parameters and can modify the cell appearance completely:

{
  "cellRenderers": {
    "statusIcon": "function(grid, cell, item, value){ cell.innerHTML = value === 'open' ? '<span class=\"status-open\">Open</span>' : '<span class=\"status-closed\">Closed</span>'; }"
  }
}

Reference the renderer on a column:

{
  "columns": [
    {
      "id": "riskStatus",
      "binding": "riskStatus",
      "header": "Status",
      "cellRenderer": "statusIcon"
    }
  ]
}

When comparing against a baseline revision, custom cell renderers are not applied. The comparison highlighting takes precedence to clearly show changes between revisions. Plan your renderers knowing that comparison mode will display raw values.

The cellRenderers registration mechanism is separate from cellDecorators. Verify the exact registration pattern for your Risksheet version, as the API may differ between releases.

Step 6: Style Column Group Headers

Use styles with .firstRow and .lastRow selectors to differentiate column group header appearance. This is useful when organizing columns into header groups:

{
  "styles": {
    ".firstRow .headSysReq": "background-color:rgba(62, 175, 63, 0.12) !important;color:#2A792D !important",
    ".lastRow .headSysReq": "background-color:#FFF !important;color:#2A792D !important",
    ".firstRow .headFinalRanking": "background-color:rgba(62, 175, 63, 0.12) !important;color:#2A792D !important",
    ".lastRow .headFinalRanking": "background-color:#FFF !important;color:#2A792D !important"
  }
}

Apply the CSS class to a column’s header group:

{
  "columns": [
    {
      "id": "sysReq",
      "header": "System Requirement",
      "headerGroup": "Upstream",
      "headerGroupCss": "headSysReq"
    }
  ]
}

Use .firstRow and .lastRow selectors to differentiate the top and bottom rows of multi-level column group headers. The .firstRow selector targets the group header row, while .lastRow targets the individual column header row beneath the group.

Complete Configuration Example

A full risksheet.json snippet combining cell decorators, styles, row header renderer, and column configuration:

{
  "formulas": {
    "commonRpn": "function(info){ var value = info.item['occ']*info.item['det']*info.item['sev']; return value?value:null;}",
    "commonRpnNew": "function(info){ var value = info.item['occNew']*info.item['detNew']*info.item['sevNew']; return value?value:null; }"
  },
  "cellDecorators": {
    "rpn": "function(info){ var val = info.value; $(info.cell).toggleClass('boldCol', true); $(info.cell).toggleClass('rpn1', val>0 && val <= 150); $(info.cell).toggleClass('rpn2', val > 150 && val <= 350); $(info.cell).toggleClass('rpn3', val > 350);}",
    "rowHeaderRpnNew": "function(info){ var val = info.item['rpnNew']; $(info.cell).toggleClass('rpn1', val>0 && val <= 150); $(info.cell).toggleClass('rpn2', val>0 && val > 150 && val <= 350); $(info.cell).toggleClass('rpn3', val>0 && val > 350);}"
  },
  "styles": {
    ".boldCol": "font-weight:600;",
    ".rpn1": "background-color: #eaf5e9 !important;color: #1d5f20 !important;",
    ".rpn2": "background-color: #fff3d2 !important; color: #735602 !important;",
    ".rpn3": "background-color: #f8eae7 !important;color: #ab1c00 !important;"
  },
  "headers": {
    "rowHeader": {
      "renderer": "rowHeaderRpnNew"
    },
    "columnHeader": {
      "height": 32
    }
  },
  "columns": [
    {
      "id": "rpn",
      "header": "RPN",
      "binding": "rpn",
      "formula": "commonRpn",
      "cellDecorator": "rpn",
      "level": 2,
      "headerGroup": "Initial Assessment"
    },
    {
      "id": "rpnNew",
      "header": "RPN (New)",
      "binding": "rpnNew",
      "formula": "commonRpnNew",
      "cellDecorator": "rpn",
      "level": 2,
      "headerGroup": "Final Ranking"
    }
  ]
}

Verification

You should now see:

RPN cells colored green, yellow, or red based on their calculated values
Bold text applied to all RPN cells via the boldCol class
Row headers colored according to the revised RPN value for at-a-glance risk assessment
Column group headers with differentiated styling for first and last rows (if configured)
No JavaScript errors in the browser developer console (F12)

Open the browser developer tools and inspect a cell element to verify that the expected CSS classes (e.g., rpn1, boldCol) are present on the cell’s DOM element.

​Step 1: Define a Cell Decorator Function

​Step 2: Define Matching CSS Styles

​Step 3: Apply Decorators to Columns

​Step 4: Configure a Row Header Renderer

​Step 5: Register Custom Cell Renderers

​Step 6: Style Column Group Headers

​Complete Configuration Example

​Verification

​See Also

Step 1: Define a Cell Decorator Function

Step 2: Define Matching CSS Styles

Step 3: Apply Decorators to Columns

Step 4: Configure a Row Header Renderer

Step 5: Register Custom Cell Renderers

Step 6: Style Column Group Headers

Complete Configuration Example

Verification

See Also