Skip to main content
Risksheet provides two distinct customization mechanisms that are often confused:
  • Cell decorators — JavaScript functions that toggle CSS classes on cells. Functions live in the cellDecorators section of the sheet configuration; columns reference them via the cellRenderer property.
  • Custom cell renderers — JavaScript functions that replace cell HTML content entirely. Functions live in the cellRenderers section of the sheet configuration; columns also reference them via the cellRenderer property.
Both mechanisms are configured in the sheet configuration file, edited through the YAML editor available in Polarion (v25.5.0+).
1

Define a Cell Decorator Function

Cell decorators are JavaScript functions registered in the cellDecorators section of the sheet configuration. 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:Add a decorator to the cellDecorators section:
This example applies CSS classes based on RPN (Risk Priority Number) value thresholds:
  • boldCol — always applied (bold text)
  • rpn1 — applied when value is 1 to 150 (low risk)
  • rpn2 — applied when value is 151 to 250 (medium risk)
  • rpn3 — applied when value exceeds 250 (high risk)
The thresholds shown above are illustrative — RPN thresholds are user-configurable in cellDecorators and vary per deployment; pick values that match your project’s risk-acceptance criteria.
Cell decorators MUST use $(info.cell).toggleClass() rather than directly setting inline styles. The grid reuses DOM cells when scrolling, so classes set with toggleClass are properly added and removed as rows recycle. Inline styles set with .css() will persist on the recycled cell and corrupt the display of unrelated rows.
You can define as many named decorators as needed in the cellDecorators object. Each column can reference a different decorator via the cellRenderer property.
2

Define Matching CSS Styles

Create CSS class definitions in the styles section of the sheet configuration to define the visual appearance applied by your decorators. Style names must be valid CSS selectors prefixed with a dot, and the rule body MUST be wrapped in braces:
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.
3

Apply Decorators to Columns

Reference your decorator on a column using the cellRenderer property. The value is the name of a function in the cellDecorators section. This activates the decorator for all cells in that column:
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.
The column-level property is named cellRenderer, but the function it references is registered in the cellDecorators section of the sheet configuration. This is the standard pattern verified in production configurations and KB article #48001172969 — the column property and the registration section have different names by design.
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 function registered in the cellDecorators section. Row header decorators use the same $(info.cell).toggleClass(...) jQuery form as cell decorators, which is what the product’s reference templates use:
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.rowHeader.renderer cellDecorators.rowHeaderRpnNew styles.rpn1 / rpn2 / rpn3 ────────────────────────── ─► ────────────────────────────── ─► ─────────────────────────── references decorator name function evaluates row data CSS classes applied to cell
5

Register Custom Cell Renderers

For complete control over cell display — replacing the default rendering entirely rather than adding CSS classes — register custom cell renderer functions in the cellRenderers section of the sheet configuration. Custom cell renderers differ from cell decorators:The column-level property name is the same in both cases (cellRenderer), but the function it points to lives in a different registration namespace. Risksheet resolves the reference by looking up the function name in both sections.Custom renderers receive four parameters and can modify the cell appearance completely:
Reference the renderer on a column:
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.
cellDecorators and cellRenderers are distinct registration sections — they are not the same namespace. If you give a decorator and a renderer the same name, the column’s cellRenderer reference will resolve to one of them depending on lookup order. Use descriptive, distinct names to avoid ambiguity (e.g., rpn for decorators, statusIcon for renderers).
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:
Apply the CSS class to a column’s header group:
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 sheet configuration snippet combining cell decorators, styles, row header renderer, and column configuration:

​
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.

​
See Also

Last modified on July 10, 2026