Skip to main content

​
Grid Cell Classes

Class NameElement TypeDescriptionExample Usage
.wj-cellCellBase cell styling in FlexGridApplied to all grid cells automatically
.readonlyCellMarks cells as read-onlyCells with no edit permission
.wj-headerHeader CellColumn header base stylingApplied to all headers automatically
.wj-row-headerRow HeaderRow header cell stylingApplied to row headers automatically
.wj-frozen-rowRowMarks frozen header rowsFrozen panes implementation
.wj-frozen-columnColumnMarks frozen side columnsFrozen panes implementation
.inner-cellCell ContentWrapper for cell inner contentStyling cell text and nested elements

​
Risk Level Classes

These classes are commonly used with cell decorators to highlight risk levels in FMEA and HARA workflows:
Class NameRisk LevelTypical BackgroundText ColorRPN Range
.rpn1Low#eaf5e9 (green)#1d5f20 (dark green)1–150
.rpn2Medium#fff3d2 (yellow)#735602 (dark yellow)151–350
.rpn3High#f8eae7 (red)#ab1c00 (dark red)351+
.boldColEmphasis——Applied with risk classes
Example CSS definitions for risk levels: 
.rpn1 {
  background-color: #eaf5e9 !important;
  color: #1d5f20 !important;
}

.rpn2 {
  background-color: #fff3d2 !important;
  color: #735602 !important;
}

.rpn3 {
  background-color: #f8eae7 !important;
  color: #ab1c00 !important;
}

.boldCol {
  font-weight: 600;
}

​
Comparison Mode Classes

When comparing document revisions or baselines, RISKSHEET applies visual indicators using these classes:
Class NamePurposeVisual IndicatorDescription
.changedModified cellYellow highlightCell value differs from baseline/previous revision
.new-rowAdded rowGreen highlightEntire row added (new work item)
.removed-rowDeleted rowRed highlightEntire row removed (deleted work item)
.not-comparedNot applicableGray highlightColumn type does not support comparison
.comparison-master-changeMaster item changedOrange borderParent work item property changed
.comparison-task-addedDownstream item addedGreen backgroundMitigation task linked to master
.comparison-task-removedDownstream item removedRed backgroundMitigation task unlinked from master
Comparison classes are automatically applied when viewing revisions side-by-side or comparing against a baseline. Users can see exactly which cells, rows, and linked items have changed between versions.

​
Header Group Classes

Column group headers can be styled using custom classes assigned via headerGroupCss property:
Class NamePurposeTypical Use
.headSysReqSystem Requirement groupGreen background for requirement columns
.headFinalRankingFinal Ranking groupGreen background for ranking columns
.headMitigationMitigation groupBlue background for mitigation columns
.headRiskRisk groupRed background for risk assessment columns
Example header group styling: 
{
  "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;"
  }
}

​
Data Type Display Classes

Class NameData TypePurpose
.multi-enum-listMulti-EnumContainer for multi-select enum values
.multi-enum-itemMulti-EnumIndividual enum tag/chip
.multi-item-linkMulti-Item LinkContainer for multiple linked items
.item-link-newItem LinkMarks newly created (pending) links with asterisk
.task-linkTask LinkStyling for task/mitigation link columns
.system-fieldSystemStyling for internal system fields
Example multi-enum styling: 
.multi-enum-list {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.multi-enum-item {
  background-color: #e3f2fd;
  color: #1976d2;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  white-space: nowrap;
}

​
Review and Approval Classes

Class NamePurposeUsage
.risk_reviewsReview containerWraps review comments and approvals
.review-commentIndividual reviewSingle review entry styling
.review-approvedApproval statusMarks approved reviews
.review-pendingPending reviewMarks pending/pending-approval reviews
.review-rejectedRejection statusMarks rejected approvals

​
State and Interaction Classes

Class NameStateDescription
.wj-frozen-paneLayoutIndicates frozen pane boundary
.wj-selectSelectionCurrently selected cell or row
.wj-editingEdit ModeCell actively being edited
.wj-groupGroupingRow group indicator
.wj-alt-rowAlternatingAlternate row coloring for readability
.wj-validation-errorValidationCell with validation error

​
Enum Status Classes

When using cell decorators with enum fields, custom classes highlight enum values: 
"cellDecorators": {
  "statusHighlight": "function(info) {
    var status = info.item['status'];
    $(info.cell).toggleClass('statusActive', status === 'active');
    $(info.cell).toggleClass('statusInactive', status === 'inactive');
    $(info.cell).toggleClass('statusPending', status === 'pending');
  }"
},
"styles": {
  ".statusActive": "background-color: #c8e6c9 !important; color: #2e7d32 !important;",
  ".statusInactive": "background-color: #ffccbc !important; color: #d84315 !important;",
  ".statusPending": "background-color: #fff9c4 !important; color: #f57f17 !important;"
}

​
CSS Class Application Priority

Highest Priority:
  1. Inline styles (style="...") with !important
  2. !important flag in class definitions
  3. Specific selector (e.g., .rpn1.boldCol)
  4. Class selector (.rpn1)
Lowest Priority:
  5. Element selector (td, .wj-cell)
When cell decorators apply multiple classes, or when your custom classes conflict with FlexGrid’s default styling, always use the !important flag in your CSS definitions. This ensures your decorator styles take precedence over built-in styles.

​
Custom Class Naming Conventions

When creating custom CSS classes for decorators, follow these conventions:
ConventionExampleUsage
Risk-based.risk-critical, .risk-high, .risk-mediumFMEA/HARA severity styling
Status-based.status-active, .status-blocked, .status-reviewWorkflow state indicators
Column group.head-requirements, .head-mitigationsHeader group styling
Data highlight.highlight-change, .highlight-conflictEmphasis and warnings
Layout.frozen-header, .row-group-titleStructural styling

​
Class Selector Patterns

Common CSS selector patterns used in RISKSHEET configurations: 
/* Target specific row class */
.firstRow .headSysReq { background: rgba(62, 175, 63, 0.12); }

/* Target last row in group */
.lastRow .headSysReq { background: #FFF; }

/* Combine multiple classes */
.rpn3.boldCol { font-weight: 700; color: #ab1c00; }

/* Target nested elements */
.inner-cell .multi-enum-item { padding: 2px 4px; }

​
Visual Style Decision Matrix

RequirementCSS ClassesDecorators
Static column stylecellCss property—
Conditional cells—cellRenderer
Row header style—rowHeader renderer
Value-based color—cellDecorators
Enum highlighting—cellDecorators
Risk level color—cellDecorators
Comparison modeAutomaticNot applicable
Support TicketsSource Code
  • risksheet.json
  • AppConfigHelper.ts
  • AppConfig.ts
  • RiskSheetContextMenu.ts
  • CellEditorFormatter.ts