CSS Classes - Nextedy Documentation

`styles` Property

Name	Type	Default	Description
`styles`	`object`	`{}`	Collection of CSS class definitions injected into the page at runtime. Keys are CSS selectors (prefixed with `.`). Values are CSS declaration strings wrapped in `{}` braces. Supports simple class selectors, compound selectors (`.firstRow .headSysReq`), and any valid CSS properties.

Syntax

Style keys use CSS selector syntax with a leading dot. The value contains one or more CSS property declarations wrapped in curly braces.

styles:
  .className: '{property: value; property: value;}'

Style values MUST be wrapped in {} braces. Without the curly braces, styles may fail to apply. Correct format: '.rpn1': '{background-color: #eaf5e9 !important; color: #1d5f20 !important;}'.

CSS styles in Risksheet typically require !important to override the grid’s default cell styling. Without !important, custom background-color and color declarations are overridden by the grid’s base styles. This is the most common issue when conditional formatting colors do not appear. Always include !important on background-color, color, and other visual properties you need to take effect.

How Styles Are Applied

Styles flow from configuration to visual display through three pathways:

Path 1: Cell Decorators — JavaScript functions in cellDecorators evaluate cell values at render time and use $(info.cell).toggleClass('className', condition) to dynamically add or remove CSS classes. Path 2: Column cellCss — A static CSS class applied unconditionally to every cell in the column. Path 3: Header Group headerGroupCss — A static CSS class applied to the header group row for columns within that group.

Built-In Style Patterns

RPN Risk Level Colors

Standard Risk Priority Number (RPN) risk level color coding used with the rpn and rowHeaderRpnNew cell decorators. These are the most commonly used styles in FMEA configurations. RPN thresholds are user-configurable per deployment — the values below are common examples but vary by project.

CSS Class	CSS Declaration	Purpose	Used By
`.boldCol`	`{font-weight:600;}`	Bold text for emphasis in calculated columns	`rpn` cell decorator
`.rpn1`	`{background-color: #eaf5e9 !important; color: #1d5f20 !important;}`	Low risk: light green background, dark green text	`rpn`, `rowHeaderRpnNew` decorators
`.rpn2`	`{background-color: #fff3d2 !important; color: #735602 !important;}`	Medium risk: light yellow background, dark yellow text	`rpn`, `rowHeaderRpnNew` decorators
`.rpn3`	`{background-color: #f8eae7 !important; color: #ab1c00 !important;}`	High risk: light red background, dark red text	`rpn`, `rowHeaderRpnNew` decorators

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;}'

RPN Color Reference Table

Risk Level	Example RPN Range	Background	Text Color	Hex Background	Hex Text
Low	1 — 150	Light green	Dark green	`#eaf5e9`	`#1d5f20`
Medium	151 — 250	Light yellow	Dark yellow	`#fff3d2`	`#735602`
High	> 250	Light red	Dark red	`#f8eae7`	`#ab1c00`

Header Group Styling

Style the first and last rows of column header groups using compound CSS selectors. The .firstRow and .lastRow pseudo-classes target the top and bottom rows of multi-level column headers.

CSS Selector	CSS Declaration	Purpose
`.firstRow .headSysReq`	`{background-color:rgba(62, 175, 63, 0.12) !important; color:#2A792D !important;}`	First header row for System Requirement column group: light green tint
`.lastRow .headSysReq`	`{background-color:#FFF !important; color:#2A792D !important;}`	Last header row for System Requirement column group: white background
`.firstRow .headFinalRanking`	`{background-color:rgba(62, 175, 63, 0.12) !important; color:#2A792D !important;}`	First header row for Final Ranking column group: light green tint
`.lastRow .headFinalRanking`	`{background-color:#FFF !important; color:#2A792D !important;}`	Last header row for Final Ranking column group: white background

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;}'

Column-Level CSS Properties

`cellCss` Property

Name	Type	Default	Description
`cellCss`	`string`	`undefined`	CSS class name(s) to apply to all cells in the column. Applied unconditionally — every cell in the column receives this class. Multiple classes can be space-separated. The class must be defined in the `styles` object.

columns:
  - id: rpn
    header: RPN
    width: 80
    cellCss: boldCol
styles:
  .boldCol: '{font-weight:600;}'

`headerGroupCss` Property

Name	Type	Default	Description
`headerGroupCss`	`string`	`undefined`	CSS class name(s) to apply to the header group row for this column. Used with compound selectors in `styles` (e.g., `.firstRow .headInitialRisk`) to style specific header group rows differently.

columns:
  - id: sev
    header: Severity
    headerGroup: Initial Risk
    headerGroupCss: headInitialRisk
  - id: occ
    header: Occurrence
    headerGroup: Initial Risk
    headerGroupCss: headInitialRisk
styles:
  .firstRow .headInitialRisk: '{background-color: #e3f2fd !important; color: #1565c0 !important;}'
  .lastRow .headInitialRisk: '{background-color: #fff !important; color: #1565c0 !important;}'

Row Height Control

Risksheet does not have a built-in row height property. Limit row height for columns with long text content using a combination of cellDecorators, styles, and the cellRenderer column property.

styles:
  .maxHeightCell: '{max-height: 80px; overflow: hidden;}'
cellDecorators:
  limitHeight: "function(info){ $(info.cell).toggleClass('maxHeightCell', true); }"
columns:
  - id: description
    header: Description
    width: 300
    cellRenderer: limitHeight

Since Risksheet does not expose a native rowHeight property, the max-height + overflow: hidden CSS technique via cell decorators is the recommended approach. Adjust the max-height value to match your desired maximum row height in pixels.

System CSS Classes

Risksheet automatically applies the following CSS classes to grid elements. These are not defined in the sheet configuration — they are managed by the grid infrastructure.

CSS Class	Applied To	Condition	Description
`readonly`	Cell (`<td>`)	Cell fails `isReadOnly` check	Applied to cells that are non-editable based on item permissions, column `readOnly` property, formula columns, or server-rendered columns. Provides visual indication of locked cells.
`rs-readonly`	Cell (`<td>`)	Applied by cellDecorator logic	Built-in Risksheet class for grayed-out visual feedback when a cellDecorator dynamically marks a cell read-only (e.g., via `info.item.systemReadOnlyFields`).
`risk_reviews`	Review content wrapper	Review comments rendered	Wrapper class around review comment HTML. Applied by all three review managers (CommentBased, ApprovalBased, WorkItemBased). Use this selector to customize review appearance.
`multi-enum-list`	Multi-enum cell container	Column type is `multiEnum:*`	Container `<span>` wrapping all selected values in a multi-select enum column.
`multi-enum-item`	Individual multi-enum value	Each selected enum value	Individual `<span>` for each selected value within a multi-enum column. Rendered as chip/tag elements.
`multiItemEditor`	Multi-enum editor	Multi-enum editor active	Applied to the editor container for multi-enum columns with dependent options.

The system CSS class names listed above are based on source code analysis. Additional system classes may exist in your specific Risksheet version. Inspect the DOM in your browser developer tools to discover all available classes.

Supported CSS Properties

The styles object accepts any valid CSS property. Commonly used properties in Risksheet configurations include:

CSS Property	Typical Use	Example
`background-color`	Cell background for risk levels	`#eaf5e9`
`color`	Text color for risk levels	`#1d5f20`
`font-weight`	Bold text for emphasis	`600`
`text-align`	Center-align numeric columns	`center`
`max-height`	Limit row height for text columns	`80px`
`overflow`	Hide overflow for height-limited cells	`hidden`
`border`	Add borders to specific cells	`1px solid #ccc`
`padding`	Adjust cell padding	`4px 8px`
`font-size`	Adjust text size	`11px`
`opacity`	Dim disabled or secondary content	`0.6`

Complete Example

Full configuration combining RPN styles, header group colors, row height control, and custom severity styling:

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;}'
  .firstRow .headInitialRisk: '{background-color: #e3f2fd !important; color: #1565c0 !important;}'
  .lastRow .headInitialRisk: '{background-color: #fff !important; color: #1565c0 !important;}'
  .firstRow .headRevisedRisk: '{background-color: #e8f5e9 !important; color: #2e7d32 !important;}'
  .lastRow .headRevisedRisk: '{background-color: #fff !important; color: #2e7d32 !important;}'
  .highSev: '{background-color: #ffcdd2 !important; color: #b71c1c !important;}'
  .medSev: '{background-color: #fff9c4 !important; color: #f57f17 !important;}'
  .lowSev: '{background-color: #c8e6c9 !important; color: #1b5e20 !important;}'
  .maxHeightCell: '{max-height: 80px; overflow: hidden;}'
  .centerAlign: '{text-align: center !important;}'
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<=250); $(info.cell).toggleClass('rpn3', val>250); }"
  rpnNew: "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<=250); $(info.cell).toggleClass('rpn3', val>250); }"
  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<=250); $(info.cell).toggleClass('rpn3', val>0 && val>250); }"
  sevColor: "function(info){ var val = info.value; $(info.cell).toggleClass('highSev', val >= 8); $(info.cell).toggleClass('medSev', val >= 4 && val < 8); $(info.cell).toggleClass('lowSev', val > 0 && val < 4); }"
  limitHeight: "function(info){ $(info.cell).toggleClass('maxHeightCell', true); }"
columns:
  - id: sev
    header: S
    width: 60
    type: rating:severity
    headerGroup: Initial Risk
    headerGroupCss: headInitialRisk
    cellCss: centerAlign
    bindings: severityRating
  - id: occ
    header: O
    width: 60
    type: rating:occurrence
    headerGroup: Initial Risk
    headerGroupCss: headInitialRisk
    cellCss: centerAlign
    bindings: occurrenceRating
  - id: det
    header: D
    width: 60
    type: rating:detection
    headerGroup: Initial Risk
    headerGroupCss: headInitialRisk
    cellCss: centerAlign
    bindings: detectionRating
  - id: rpn
    header: RPN
    width: 80
    formula: commonRpn
    headerGroup: Initial Risk
    headerGroupCss: headInitialRisk
  - id: description
    header: Description
    width: 300
    cellRenderer: limitHeight
    bindings: description
headers:
  rowHeader:
    renderer: rowHeaderRpnNew
  columnHeader:
    height: 32
  columnGroupHeader:
    height: 32

Cell Decorators — JavaScript functions that toggle CSS classes based on cell values
Conditional Formatting — combining formulas, decorators, and styles for data-driven visuals
Item Colors — row-level color coding for work item types
Custom Renderer Templates — advanced cell rendering with JavaScript functions
Sheet Configuration Format — full configuration file reference
Column Type Reference — column definition properties including cellCss and headerGroupCss

​styles Property

​Syntax

​How Styles Are Applied

​Built-In Style Patterns

​RPN Risk Level Colors

​RPN Color Reference Table

​Header Group Styling

​Column-Level CSS Properties

​cellCss Property

​headerGroupCss Property

​Row Height Control

​System CSS Classes

​Supported CSS Properties

​Complete Example

​Related Pages

`styles` Property

Syntax

How Styles Are Applied

Built-In Style Patterns

RPN Risk Level Colors

RPN Color Reference Table

Header Group Styling

Column-Level CSS Properties

`cellCss` Property

`headerGroupCss` Property

Row Height Control

System CSS Classes

Supported CSS Properties

Complete Example

Related Pages