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

# Configure Item Colors

> Apply color-coded styling to Nextedy RISKSHEET cells and row headers based on data values, making risk levels instantly recognizable in your risk analysis grid.

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

## Prerequisites

* A working Risksheet document with risk items
* Access to the sheet configuration sheet configuration
* Familiarity with CSS color properties

## How Item Color Styling Works

Risksheet uses three configuration properties that work together to apply data-driven colors:

1. **`cellDecorators`** -- JavaScript functions that evaluate cell values and apply CSS classes
2. **`styles`** -- CSS class definitions that specify colors, fonts, and backgrounds
3. **`headers.rowHeader.renderer`** -- Optional row header renderer for applying colors to the row header column

| Configuration Flow                                               |                   |                   |      |                   |
| ---------------------------------------------------------------- | ----------------- | ----------------- | ---- | ----------------- |
| cellDecorators              styles                  Grid Display |                   |                   |      |                   |
| rpn: function()                                                  | ------>           | .rpn1 \{ green }  | ---> | Cell: 120 (green) |
| evaluates value                                                  | .rpn2 \{ yellow } | Cell: 250 (amber) |      |                   |
| applies CSS class                                                | .rpn3 \{ red }    | Cell: 400 (red)   |      |                   |

<Steps>
  <Step title="Define Cell Decorator Functions">
    Cell decorators are JavaScript functions that inspect cell values and toggle CSS classes. Add them to the `cellDecorators` section of your sheet configuration:

    ```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); }
    ```

    The `info` parameter provides:

    | Property     | Description                         |
    | ------------ | ----------------------------------- |
    | `info.value` | The current cell value              |
    | `info.cell`  | The DOM element of the cell         |
    | `info.item`  | The full work item data for the row |
  </Step>

  <Step title="Define CSS Styles for Color Classes">
    Map the CSS classes used in your decorators to actual color definitions in the `styles` section:

    ```yaml theme={null}
    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;}'
      .boldCol: '{font-weight: 600;}'
    ```

    This example creates a three-tier color scheme for Risk Priority Numbers (RPN):

    | Class  | Range      | Background               | Text                   | Meaning     |
    | ------ | ---------- | ------------------------ | ---------------------- | ----------- |
    | `rpn1` | 1 -- 150   | Light green (`#eaf5e9`)  | Dark green (`#1d5f20`) | Low risk    |
    | `rpn2` | 151 -- 250 | Light yellow (`#fff3d2`) | Dark amber (`#735602`) | Medium risk |
    | `rpn3` | > 250      | Light red (`#f8eae7`)    | Dark red (`#ab1c00`)   | High risk   |

    <Tip title="Use `!important` for reliable styling">
      Always include `!important` on `background-color` and `color` properties in your style definitions. Without it, the grid's default CSS may silently override your custom colors.
    </Tip>
  </Step>

  <Step title="Assign the Decorator to Your Column">
    Reference the decorator name in the `cellRenderer` property of the column that should display conditional colors:

    ```yaml theme={null}
    {
      "columns": [
        {
          bindings: "rpn",
          "header": "RPN",
          "formula": "commonRpn",
          "cellRenderer": "rpn",
          "width": 60
        }
      ]
    }
    ```

    The `cellRenderer` value must match a key defined in the top-level `cellDecorators` object.
  </Step>

  <Step title="Color Row Headers">
    To apply color coding to the row header column for at-a-glance risk visibility, configure a custom renderer in the `headers` section and pair it with a cell decorator that reads from the work item:

    ```yaml theme={null}
    headers:
      rowHeader:
        renderer: rowHeaderRpnNew
    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="Row header decorators use `info.item`, not `info.value`">
      Row headers are not bound to a specific column. Access data through `info.item['fieldName']` instead. The example above reads the revised RPN field `rpnNew`.
    </Warning>
  </Step>

  <Step title="Style Column Group Headers">
    Apply distinct background colors to column group headers to visually separate FMEA sections:

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

    The `.firstRow` and `.lastRow` selectors target multi-row column group headers, letting you differentiate between the group title row and the individual column title row.
  </Step>
</Steps>

## Common Color Palettes

Recommended color combinations for standard risk analysis use cases:

| Use Case     | Low                   | Medium                | High                  |
| ------------ | --------------------- | --------------------- | --------------------- |
| RPN (3-tier) | `#eaf5e9` / `#1d5f20` | `#fff3d2` / `#735602` | `#f8eae7` / `#ab1c00` |
| Status flags | `#e8f5e9` / `#388e3c` | `#e3f2fd` / `#1565c0` | `#ffebee` / `#b71c1c` |

<Info title="Verify in application">
  The color palettes above are suggested starting points. Adjust the threshold values in your `cellDecorators` functions to match your organization's risk classification scales and standards.
</Info>

## Verification

After saving your sheet configuration and refreshing the page:

* You should now see RPN cells color-coded green (1--150), yellow (151--250), or red (>250)
* Row headers should reflect the revised RPN color for each risk item
* Column group headers should display the configured section colors

If colors do not appear, open the browser developer console and verify that the CSS classes (`rpn1`, `rpn2`, `rpn3`) are being applied to the cell elements.

## See Also

* [Apply Conditional Formatting](/risksheet/guides/styling/conditional-formatting) -- broader conditional formatting patterns
* [Configure Cell Styles](/risksheet/guides/styling/cell-styles) -- general cell styling options
* [Configure Row Header Styles](/risksheet/guides/styling/row-header-styles) -- row header customization
* [Configure Calculated Columns](/risksheet/guides/columns/calculated-columns) -- set up formulas that drive color-coded values

***

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