Configure Row Header Styles - Nextedy Documentation

How Row Headers Work

Row headers appear on the left side of the grid and display the work item ID (systemItemId) for each row. You assign a custom renderer function that applies conditional CSS classes based on work item data.

{
  "cellDecorators": {
    "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); }"
  }
}

The function uses info.item['fieldId'] to access any field on the work item. In this example, it reads the rpnNew field (revised RPN after mitigations) and applies color classes based on risk thresholds.

Use info.item['fieldId'] to read any field from the current row’s work item. For enum fields, the value is the enum ID, not the display name. For example, info.item['severity'] returns '5', not 'Critical'.

Step 2: Assign the Renderer to Row Headers

Reference the renderer function in the headers.rowHeader.renderer property:

{
  "headers": {
    "rowHeader": {
      "renderer": "rowHeaderRpnNew",
      "width": 80
    }
  }
}

The renderer value must match the key name in the cellDecorators object exactly.

Step 3: Define Supporting Styles

Ensure the CSS classes referenced in the renderer are defined in styles:

{
  "styles": {
    ".rpn1": "{ background-color: #eaf5e9 !important; color: #1d5f20 !important; }",
    ".rpn2": "{ background-color: #fff3d2 !important; color: #735602 !important; }",
    ".rpn3": "{ background-color: #f8eae7 !important; color: #ab1c00 !important; }"
  }
}

Row Header Renderer with Enum Values

For row headers colored by enum field values such as severity level, compare against the enum IDs:

{
  "cellDecorators": {
    "rowHeaderBySeverity": "function(info){ var sev = info.item['severity']; $(info.cell).toggleClass('sevLow', sev === '1' || sev === '2'); $(info.cell).toggleClass('sevMed', sev === '3'); $(info.cell).toggleClass('sevHigh', sev === '4' || sev === '5'); }"
  }
}

Row header renderers compare against enum IDs, not display names. If your severity enum has "id": "5" with "name": "Critical", compare against '5', not 'Critical'. This is a frequent source of styling issues.

Row Header Merging

When using multi-level hierarchies, row headers automatically merge vertically for consecutive rows that share the same systemItemId. This creates a single colored header cell spanning multiple sub-rows:

Multiple rows belonging to the same work item (for example, multiple causes for one failure mode) display a single merged row header
The merged row header color is based on the parent work item’s field values

Complete Example

{
  "headers": {
    "rowHeader": {
      "renderer": "rowHeaderRpnNew",
      "width": 85
    },
    "columnHeader": {
      "height": 36
    }
  },
  "cellDecorators": {
    "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); }"
  },
  "styles": {
    ".rpn1": "{ background-color: #eaf5e9 !important; color: #1d5f20 !important; }",
    ".rpn2": "{ background-color: #fff3d2 !important; color: #735602 !important; }",
    ".rpn3": "{ background-color: #f8eae7 !important; color: #ab1c00 !important; }"
  }
}

Troubleshooting

Problem	Cause	Solution
Row header has no color	Renderer name mismatch	Verify `headers.rowHeader.renderer` matches `cellDecorators` key exactly
Color always the same	Comparing display name instead of ID	Use enum IDs in comparisons, not display names
Styles not applying	Missing `!important`	Add `!important` to CSS properties in `styles`
Calculated values empty	Data imported but not edited in Risksheet	Edit items in Risksheet or use data sync (v24.5.1+)

Verification

After saving your configuration changes and reloading the page, you should now see:

Row header cells colored based on the field values defined in your renderer function
Low-risk items with green row headers, medium with yellow, high with red (for the RPN-based example)
Merged row headers maintaining the correct color for hierarchical multi-level rows

​How Row Headers Work

​Step 2: Assign the Renderer to Row Headers

​Step 3: Define Supporting Styles

​Row Header Renderer with Enum Values

​Row Header Merging

​Complete Example

​Troubleshooting

​Verification

​See Also

How Row Headers Work

Step 2: Assign the Renderer to Row Headers

Step 3: Define Supporting Styles

Row Header Renderer with Enum Values

Row Header Merging

Complete Example

Troubleshooting

Verification

See Also