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

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

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 level color coding used with the rpn and rowHeaderRpnNew cell decorators. These are the most commonly used styles in FMEA configurations.

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 (RPN 1—150): light green background, dark green text	`rpn`, `rowHeaderRpnNew` decorators
`.rpn2`	`background-color: #fff3d2 !important; color: #735602 !important;`	Medium risk (RPN 151—350): light yellow background, dark yellow text	`rpn`, `rowHeaderRpnNew` decorators
`.rpn3`	`background-color: #f8eae7 !important; color: #ab1c00 !important;`	High risk (RPN >350): 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	RPN Range	Background	Text Color	Hex Background	Hex Text
Low	1 — 150	Light green	Dark green	`#eaf5e9`	`#1d5f20`
Medium	151 — 350	Light yellow	Dark yellow	`#fff3d2`	`#735602`
High	> 350	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;"
  }
}

`isContentHtml` Property

Name	Type	Default	Description
`isContentHtml`	`boolean`	`undefined`	When `true`, cell content is rendered as HTML rather than plain text. Allows custom HTML markup including inline styles and class attributes.

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 risksheet.json — 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.
`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<=350); $(info.cell).toggleClass('rpn3', val>350); }",
    "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<=350); $(info.cell).toggleClass('rpn3', val>350); }",
    "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<=350); $(info.cell).toggleClass('rpn3', val>0 && val>350); }",
    "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"
    },
    {
      "id": "occ",
      "header": "O",
      "width": 60,
      "type": "rating:occurrence",
      "headerGroup": "Initial Risk",
      "headerGroupCss": "headInitialRisk",
      "cellCss": "centerAlign"
    },
    {
      "id": "det",
      "header": "D",
      "width": 60,
      "type": "rating:detection",
      "headerGroup": "Initial Risk",
      "headerGroupCss": "headInitialRisk",
      "cellCss": "centerAlign"
    },
    {
      "id": "rpn",
      "header": "RPN",
      "width": 80,
      "formula": "commonRpn",
      "headerGroup": "Initial Risk",
      "headerGroupCss": "headInitialRisk"
    },
    {
      "id": "description",
      "header": "Description",
      "width": 300,
      "cellRenderer": "limitHeight"
    }
  ],
  "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
Risksheet.json Format — full configuration file reference
Column Type Reference — column definition properties including cellCss and headerGroupCss

Sources

Support Tickets

#6863

Source Code

risksheet.json
AppConfigHelper.ts
AppConfig.ts
RiskSheetContextMenu.ts
CellEditorFormatter.ts

​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

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

`isContentHtml` Property

Row Height Control

System CSS Classes

Supported CSS Properties

Complete Example

Related Pages