Skip to main content

​
Styling Pages

Cell Decorators — Dynamic CSS class application based on cell values
Automatically apply visual styles to cells using JavaScript functions that evaluate row data and assign CSS classes in real time. CSS Classes — Built-in and custom style definitions
Define reusable visual styles for cells, headers, rows, and decorators. Configure font, color, background, borders, and layout properties. Conditional Formatting — Rule-based cell styling
Apply styles conditionally based on value ranges, thresholds, and formula results. Common patterns for risk prioritization and status visualization. Item Colors — Row-level coloring for work item types
Set background colors for entire rows based on work item type, status, or custom data attributes to distinguish between risk types and mitigation tasks.

​
Styling Workflow

diagram

​
Common Styling Patterns

​
FMEA Risk Priority Visualization

Highlight RPN (Risk Priority Number) cells with color coding:
RPN RangeClassColorMeaning
1-150rpn1GreenLow risk — Standard controls sufficient
151-350rpn2YellowMedium risk — Enhanced controls recommended
351-1000rpn3RedHigh risk — Immediate action required

​
Status Indicators

Apply consistent styling based on work item status:
StatusClassVisualUse Case
Openstatus-openBlue borderRisk identified, awaiting review
Approvedstatus-approvedGreen checkmarkMitigation plan approved
In Progressstatus-activeOrange iconMitigation implementation underway
Closedstatus-closedGray backgroundRisk resolved or mitigated

​
Priority Matrix

Combine severity and occurrence dimensions: diagram

​
Configuration Example

A typical styling configuration in risksheet.json: 
{
  "styles": {
    "rpn1": "background-color: #eaf5e9; color: #1d5f20;",
    "rpn2": "background-color: #fff3d2; color: #735602;",
    "rpn3": "background-color: #f8eae7; color: #ab1c00;",
    "boldCol": "font-weight: 600;",
    "highlight": "background-color: #ffeb3b; font-weight: bold;"
  },
  "cellDecorators": {
    "rpnHighlight": "function(info) { ... apply classes ... }"
  }
}
Styles apply only to cells and headers within the Nextedy RISKSHEET widget. Export documents (PDF, Excel) use separate export-specific styling configuration. See the export guides for customizing document appearance.

​
Performance Considerations

  • Decorator functions execute per cell during rendering: keep logic simple and fast
  • CSS classes override styles more efficiently than inline properties
  • Avoid heavy DOM manipulation in decorators (reading/writing DOM properties repeatedly)
  • Pre-compute values when possible rather than calculating in decorators
  • Limit regex patterns in conditional styling logic

​
Browser Compatibility

Nextedy RISKSHEET styling uses standard CSS 3 properties supported across:
  • Chrome/Chromium 90+
  • Firefox 88+
  • Safari 14+
  • Edge 90+
Flexbox and Grid layouts are supported. Avoid vendor-prefixed properties in custom styles.

​
See Also

KB ArticlesSupport TicketsSource Code
  • risksheet.json
  • AppConfig.ts
  • RiskSheetContextMenu.ts
  • SheetConstants.ts
  • CellEditorFormatter.ts