> ## Documentation Index
> Fetch the complete documentation index at: https://learn.nextedy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Item Colors

> Item colors provide row-level and cell-level visual indicators in the Nextedy RISKSHEET grid based on work item properties, risk parameters, and workflow status.

export const LastReviewed = ({date}) => {
  if (!date) return null;
  const formatted = new Date(`${date}T00:00:00Z`).toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
    timeZone: "UTC"
  });
  return <p className="mt-10 text-sm text-gray-400 dark:text-zinc-500 not-prose">
      Last reviewed on {formatted}
    </p>;
};

<Info title="Verify in application">
  This page has thin source coverage. The color mechanisms documented below are derived from the sheet configuration sample and the `AppConfig.ts` source. Additional color options may be available in your Risksheet version. Verify specific color classes and decorator behaviors in your application.
</Info>

## Configuration Architecture

Item colors in Risksheet follow a three-layer architecture. Each layer serves a distinct purpose, and all three work together to produce the final visual appearance of cells and rows.

<Frame>
  <img src="https://mintcdn.com/none-17b4493f/yWl5nA2D0IzEnZC1/risksheet/diagrams/reference/styling/item-colors/diagram-1.svg?fit=max&auto=format&n=yWl5nA2D0IzEnZC1&q=85&s=ff391110c9fdc3073ad2c35dd16e7443" alt="diagram" style={{ maxWidth: "520px", width: "100%" }} width="520" height="310" data-path="risksheet/diagrams/reference/styling/item-colors/diagram-1.svg" />
</Frame>

## The `styles` Property

The `styles` property defines named CSS class rules that control visual appearance. Each entry maps a CSS class name to a set of CSS properties.

| Property | Type     | Default | Description                                                                      |
| -------- | -------- | ------- | -------------------------------------------------------------------------------- |
| `styles` | `object` | `{}`    | Named CSS style definitions for conditional cell formatting based on data values |

### Style Definition Format

Each key in the `styles` object is a CSS class name (prefixed with `.`), and the value is a CSS declaration block wrapped in curly braces `{}`:

```yaml theme={null}
styles:
  .className: '{css-property: value; another-property: value;}'
```

### Risk Priority Number (RPN) Styles

The following built-in style classes implement a three-tier risk color scheme based on RPN thresholds.

| Style Class | RPN Range                | Background Color         | Text Color              | Purpose                                           |
| ----------- | ------------------------ | ------------------------ | ----------------------- | ------------------------------------------------- |
| `.boldCol`  | All                      | Inherited                | Inherited               | Applies `font-weight: 600` for bold text emphasis |
| `.rpn1`     | 1 -- 150 (low risk)      | `#eaf5e9` (light green)  | `#1d5f20` (dark green)  | Low-risk visual indicator                         |
| `.rpn2`     | 151 -- 250 (medium risk) | `#fff3d2` (light yellow) | `#735602` (dark yellow) | Medium-risk visual indicator                      |
| `.rpn3`     | > 250 (high risk)        | `#f8eae7` (light red)    | `#ab1c00` (dark red)    | High-risk visual indicator                        |

<Tip title="Color Priority">
  All RPN style classes use `!important` to override default cell styling. This ensures risk color indicators are always visible regardless of other CSS rules that may apply to the cell.
</Tip>

### RPN Style Configuration

```yaml theme={null}
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;}'
```

### Column Group Header Styles

Styles can target specific column group headers by combining row position selectors with header group CSS classes. These styles apply to the column header area, not to data cells.

| Style Selector                | Background                              | Text Color | Purpose                                             |
| ----------------------------- | --------------------------------------- | ---------- | --------------------------------------------------- |
| `.firstRow .headSysReq`       | `rgba(62, 175, 63, 0.12)` (light green) | `#2A792D`  | First row of System Requirement column group header |
| `.lastRow .headSysReq`        | `#FFF` (white)                          | `#2A792D`  | Last row of System Requirement column group header  |
| `.firstRow .headFinalRanking` | `rgba(62, 175, 63, 0.12)` (light green) | `#2A792D`  | First row of Final Ranking column group header      |
| `.lastRow .headFinalRanking`  | `#FFF` (white)                          | `#2A792D`  | Last row of Final Ranking column group header       |

```yaml theme={null}
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;}'
```

<Note title="Header Group CSS Classes">
  The `headSysReq` and `headFinalRanking` classes are applied to column groups via the `headerGroupCss` property on column definitions. You assign these classes when configuring column groups to enable targeted header styling.
</Note>

## The `cellDecorators` Property

Cell decorators are JavaScript functions that dynamically apply CSS classes to cells based on their current values or the parent item's properties. They execute each time a cell is rendered, ensuring colors always reflect the current data.

| Property         | Type     | Default | Description                                                                         |
| ---------------- | -------- | ------- | ----------------------------------------------------------------------------------- |
| `cellDecorators` | `object` | `{}`    | Maps column IDs to JavaScript functions that apply conditional CSS classes to cells |

### Cell Decorator Function Signature

Each cell decorator receives an `info` object with the following properties:

| Parameter    | Type          | Description                                                                                                 |
| ------------ | ------------- | ----------------------------------------------------------------------------------------------------------- |
| `info.value` | `any`         | The current value of the cell being rendered                                                                |
| `info.cell`  | `HTMLElement` | The DOM element of the cell (wrapped with jQuery for `toggleClass` calls)                                   |
| `info.item`  | `object`      | The full data item (work item) for the current row, allowing access to any field via `info.item['fieldId']` |

### RPN Cell Decorator

The `rpn` cell decorator applies risk-level color classes to RPN cells based on value thresholds:

```yaml theme={null}
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);}
```

**Logic breakdown:**

| Condition                 | Class Applied           | Visual Result                          |
| ------------------------- | ----------------------- | -------------------------------------- |
| Always                    | `boldCol`               | Bold text (font-weight: 600)           |
| `val > 0 && val <= 150`   | `rpn1`                  | Green background, dark green text      |
| `val > 150 && val <= 250` | `rpn2`                  | Yellow background, dark yellow text    |
| `val > 250`               | `rpn3`                  | Red background, dark red text          |
| `val == 0` or `null`      | None (except `boldCol`) | Default cell appearance with bold text |

### Row Header RPN Decorator

The `rowHeaderRpnNew` cell decorator applies the same RPN color scheme to row headers based on the **revised** (post-mitigation) RPN value stored in the `rpnNew` field:

```yaml theme={null}
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
    <= 250); $(info.cell).toggleClass('rpn3', val>0 && val > 250);}
```

<Warning title="Decorator References Item Properties">
  Unlike the `rpn` decorator which uses `info.value` (the cell's own value), the `rowHeaderRpnNew` decorator uses `info.item['rpnNew']` to read the revised RPN from the item data. This means the row header color reflects the post-mitigation risk level regardless of which cell triggered the render.
</Warning>

## Row Header Renderer

The row header renderer is a named function that controls the visual appearance of the row header column (the leftmost column showing work item identifiers).

| Property                     | Type     | Default         | Description                                          |
| ---------------------------- | -------- | --------------- | ---------------------------------------------------- |
| `headers.rowHeader.renderer` | `string` | See application | Defines the custom renderer function for row headers |

### Row Header Configuration

```yaml theme={null}
headers:
  rowHeader:
    renderer: rowHeaderRpnNew
  columnHeader:
    height: 32
  columnGroupHeader:
    height: 32
```

The `renderer` value references a cell decorator by name. In the example above, `rowHeaderRpnNew` causes each row header to be colored based on the revised RPN value of the corresponding risk item. This gives users an immediate visual summary of risk levels without scanning individual columns.

## Applying Colors to Columns

To connect cell decorators to specific columns, reference the decorator name in your column configuration. The decorator is applied every time a cell in that column is rendered.

A column references a cell decorator via its `cellRenderer` property. Set `cellRenderer` to the decorator name -- for example, `cellRenderer: "rpn"` applies the decorator named `rpn` to that column. As described in [Cell Decorators](/risksheet/reference/styling/cell-decorators), a decorator may also auto-match a column when the decorator's name equals the column `id`.

### Typical Column-to-Decorator Mapping

In an FMEA configuration, RPN columns reference the `rpn` cell decorator:

| Column Binding         | Decorator         | Applied Style Classes           |
| ---------------------- | ----------------- | ------------------------------- |
| `rpn` (Initial RPN)    | `rpn`             | `boldCol`, `rpn1`/`rpn2`/`rpn3` |
| `rpnNew` (Revised RPN) | `rpn`             | `boldCol`, `rpn1`/`rpn2`/`rpn3` |
| Row header             | `rowHeaderRpnNew` | `rpn1`/`rpn2`/`rpn3`            |

## Custom Color Schemes

You can define custom color schemes by creating new style classes and cell decorator functions. The general pattern is:

1. Define CSS classes in `styles` with your desired colors
2. Create a JavaScript function in `cellDecorators` that applies those classes based on data conditions
3. Reference the decorator in the appropriate column configuration

### Example: Custom Severity Color Scheme

```yaml theme={null}
styles:
  .sev-low: '{background-color: #e3f2fd !important; color: #1565c0 !important;}'
  .sev-medium: '{background-color: #fff8e1 !important; color: #f57f17 !important;}'
  .sev-high: '{background-color: #fce4ec !important; color: #c62828 !important;}'
  .sev-critical: '{background-color: #b71c1c !important; color: #ffffff !important;}'
cellDecorators:
  severityColor: function(info){ var val = info.value; $(info.cell).toggleClass('sev-low',
    val >= 1 && val <= 3); $(info.cell).toggleClass('sev-medium', val >= 4 && val
    <= 6); $(info.cell).toggleClass('sev-high', val >= 7 && val <= 8); $(info.cell).toggleClass('sev-critical',
    val >= 9);}
```

## Color Behavior in Export

Cell colors applied through `styles` and `cellDecorators` have different behaviors across export formats:

| Export Format       | Color Support | Notes                                                                                                                |
| ------------------- | ------------- | -------------------------------------------------------------------------------------------------------------------- |
| PDF Export          | Supported     | Cell formatter processes styles during PDF generation; see [PDF Export API](/risksheet/reference/api/pdf-export-api) |
| Excel Export        | Limited       | Some style information transfers; see [Compatibility](/risksheet/reference/compatibility/index) for details          |
| Baseline Comparison | Modified      | Comparison mode adds its own color indicators (added/removed/modified) which may override decorator colors           |

<Info title="Verify in application">
  The exact behavior of custom styles in PDF and Excel exports depends on the export script configuration. Colors defined with `!important` are more likely to be preserved. Check your `pdfscript.js` for custom export formatting logic.
</Info>

## Complete Example

A complete sheet configuration demonstrating all item color mechanisms for an FMEA risk analysis:

```yaml theme={null}
headers:
  rowHeader:
    renderer: rowHeaderRpnNew
  columnHeader:
    height: 32
  columnGroupHeader:
    height: 32
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 .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;}'
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);}
  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);}
```

## Related Pages

* [Cell Decorators](/risksheet/reference/styling/cell-decorators) -- full reference for the `cellDecorators` configuration property
* [CSS Classes](/risksheet/reference/styling/css-classes) -- complete list of built-in and custom CSS classes
* [Conditional Formatting](/risksheet/reference/styling/conditional-formatting) -- overview of all conditional formatting mechanisms
* [Configuration Properties Index](/risksheet/reference/configuration/properties-index) -- full property reference including `styles`, `cellDecorators`, and `headers`
* [PDF Export API](/risksheet/reference/api/pdf-export-api) -- how colors are handled during PDF export

<LastReviewed date="2026-06-24" />