Skip to main content

Cell Decorators

JavaScript functions that toggle CSS classes on cells based on data values, enabling dynamic conditional styling for risk levels, status indicators, and threshold alerts.

CSS Classes

Custom CSS class definitions in the styles configuration object, including RPN color coding, header group styling, bold formatting, and column-specific appearance rules.

Conditional Formatting

Complete reference for combining cell decorators, styles, and formulas to create data-driven visual indicators for risk levels, workflow status, and field completeness.

Item Colors

Row-level and item-level color coding based on work item properties, risk parameters, and workflow status for visual risk identification across the grid.
diagram
Custom styles in Risksheet typically need !important to override the grid’s default styling. Always include !important in background-color and color declarations within the styles object. Without it, your custom colors will be overridden by the grid’s built-in styles.

​
Key Configuration Properties

PropertyLocationPurpose
stylesRoot of risksheet.jsonNamed CSS class definitions injected into the page
cellDecoratorsRoot of risksheet.jsonJavaScript functions that toggle CSS classes per cell
cellCssColumn definitionStatic CSS class always applied to a column’s cells
headerGroupCssColumn definitionCSS class applied to the header group row
headers.rowHeader.rendererHeaders configurationCustom renderer for row header conditional styling
KB ArticlesSource Code
  • risksheet.json
  • AppConfig.ts
  • RiskSheetContextMenu.ts
  • SheetConstants.ts
  • CellEditorFormatter.ts