Item Colors

Overview

Item colors differ from cell-level conditional formatting:

Item Colors — Apply to the entire row or row header based on work item properties
Cell Formatting — Apply to individual cells based on cell or row values

Item colors are useful for visual grouping: showing all rows of a particular status in the same color, or highlighting high-risk items throughout the row.

Color Assignment Methods

Method 1: Row Header Color (Renderer-Based)

Assign a renderer function to the row header to apply colors based on row data:

{
  "headers": {
    "rowHeader": {
      "renderer": "itemColorRenderer"
    }
  },
  "cellDecorators": {
    "itemColorRenderer": "function(info){\n var rpn = info.item['rpnNew'];\n if (rpn > 250) $(info.cell).css('border-left', '7px solid #F3AEAC');\n else if (rpn > 150) $(info.cell).css('border-left', '7px solid #FFFE54');\n else $(info.cell).css('border-left', '7px solid #B0D444');\n}"
  }
}

The row header (leftmost column) will show a colored left border based on the RPN value.

Method 2: Full Row Styling

Apply a CSS class to the entire row using a row-level decorator:

{
  "cellDecorators": {
    "rowColor": "function(info){\n var status = info.item['status'];\n if (status === 'completed') $(info.cell).closest('tr').addClass('row-completed');\n if (status === 'in-progress') $(info.cell).closest('tr').addClass('row-active');\n if (status === 'blocked') $(info.cell).closest('tr').addClass('row-blocked');\n}"
  },
  "styles": {
    ".row-completed": "{background-color: #d4edda !important;}",
    ".row-active": "{background-color: #fff3cd !important;}",
    ".row-blocked": "{background-color: #f8d7da !important;}"
  }
}

Color Configuration Properties

Row Header Color Definition

Property	Type	Required	Description
`headers.rowHeader.renderer`	string	Yes	Function name from `cellDecorators` that applies color logic
`border-width`	number	No	Width of colored border (typically 4-7px)
`border-color`	hex/rgb	Yes	Color code for the border (#F3AEAC, #FFFE54, etc.)
`background-color`	hex/rgb	No	Optional background color for row header cell

Color Palette for Risk Levels

The standard FMEA color scheme uses three risk bands:

Risk Level	RPN Range	Color Code	RGB	Purpose
Low	1–150	`#B0D444`	rgb(176, 212, 68)	Green — acceptable risk
Medium	151–350	`#FFFE54`	rgb(255, 254, 84)	Yellow — needs attention
High	351+	`#F3AEAC`	rgb(243, 174, 172)	Red — requires mitigation

Implementation Example

Basic RPN-Based Row Colors

{
  "headers": {
    "rowHeader": {
      "renderer": "rowHeaderRpnColor",
      "width": 90
    }
  },
  "cellDecorators": {
    "rowHeaderRpnColor": "function(info){\n var rpn = info.item['rpnNew'];\n if (rpn > 250) {\n $(info.cell).css('border-left', '7px solid #F3AEAC');\n $(info.cell).css('background-color', 'rgba(243, 174, 172, 0.15)');\n } else if (rpn > 150) {\n $(info.cell).css('border-left', '7px solid #FFFE54');\n $(info.cell).css('background-color', 'rgba(255, 254, 84, 0.15)');\n } else {\n $(info.cell).css('border-left', '7px solid #B0D444');\n $(info.cell).css('background-color', 'rgba(176, 212, 68, 0.15)');\n }\n}"
  },
  "styles": {
    ".rowHeadRpn1": "{border-left: 7px solid #B0D444 !important; background-color: rgba(176, 212, 68, 0.15) !important;}",
    ".rowHeadRpn2": "{border-left: 7px solid #FFFE54 !important; background-color: rgba(255, 254, 84, 0.15) !important;}",
    ".rowHeadRpn3": "{border-left: 7px solid #F3AEAC !important; background-color: rgba(243, 174, 172, 0.15) !important;}"
  }
}

Status-Based Row Colors

{
  "cellDecorators": {
    "statusRowColor": "function(info){\n var status = info.item['reviewStatus'];\n var cell = $(info.cell);\n switch(status) {\n case 'approved': cell.toggleClass('status-approved', true); break;\n case 'pending-review': cell.toggleClass('status-pending', true); break;\n case 'rejected': cell.toggleClass('status-rejected', true); break;\n case 'draft': cell.toggleClass('status-draft', true); break;\n }\n}"
  },
  "styles": {
    ".status-approved": "{background-color: #d4edda !important; color: #155724 !important;}",
    ".status-pending": "{background-color: #fff3cd !important; color: #856404 !important;}",
    ".status-rejected": "{background-color: #f8d7da !important; color: #721c24 !important;}",
    ".status-draft": "{background-color: #e7e7e7 !important; color: #333333 !important;}"
  }
}

Color Application Flow

Color Palettes by Use Case

Risk Management (FMEA/HARA)

Category	Color	Code	Usage
Acceptable	Green	`#B0D444`	RPN ≤ 150
Review Needed	Yellow	`#FFFE54`	RPN 151–350
Mitigate	Red	`#F3AEAC`	RPN ≥ 351

Workflow Status

Status	Color	Code	Usage
Approved	Green	`#d4edda`	Final sign-off
In Progress	Blue	`#cce5ff`	Active work
On Hold	Yellow	`#fff3cd`	Blocked/waiting
Rejected	Red	`#f8d7da`	Needs rework

Severity Levels

Severity	Color	Code	Usage
Critical	Dark Red	`#dc3545`	System down
High	Red	`#f8d7da`	Major issue
Medium	Orange	`#ffc107`	Moderate impact
Low	Green	`#d4edda`	Minor issue

Use semi-transparent backgrounds with rgba() to allow content to remain readable:

$(info.cell).css('background-color', 'rgba(243, 174, 172, 0.15)');

This applies only 15% opacity, keeping the color subtle while text remains clear.

Advanced Color Techniques

Multi-Property Color Logic

Combine multiple row properties for sophisticated color assignment:

function(info){
  var rpn = info.item['rpnNew'];
  var hasTask = info.item['mitigationTask'] !== null;
  var severity = info.item['severity'];
  
  var $cell = $(info.cell);
  
  // Priority 1: High RPN without mitigation
  if (rpn > 250 && !hasTask) {
    $cell.css('border-left', '7px solid #dc3545');
  }
  // Priority 2: High RPN with mitigation in progress
  else if (rpn > 250 && hasTask) {
    $cell.css('border-left', '7px solid #ffc107');
  }
  // Priority 3: Medium RPN
  else if (rpn > 150) {
    $cell.css('border-left', '7px solid #FFFE54');
  }
  // Priority 4: Low RPN
  else {
    $cell.css('border-left', '7px solid #B0D444');
  }
}

Conditional Text Color

Adjust both background and text color for maximum contrast:

function(info){
  var priority = info.item['priority'];
  
  if (priority === '1-Critical') {
    $(info.cell).css('background-color', '#dc3545');
    $(info.cell).css('color', '#ffffff');
    $(info.cell).css('font-weight', '600');
  }
}

Performance Considerations

Row header renderers execute for every visible row. On grids with 500+ rows:

Keep decorator logic simple (avoid loops or API calls)
Use CSS classes instead of direct css() calls when possible
Classes batch-apply styles more efficiently
Test with virtualization enabled to ensure smooth scrolling

CSS Specificity Notes

When combining row colors with cell decorators, ensure CSS rules don’t conflict:

{
  "styles": {
    ".rpn1": "{background-color: #eaf5e9 !important; color: #1d5f20 !important;}",
    ".rowHeadRpn1": "{border-left: 7px solid #B0D444 !important;}"
  }
}

Row header colors (borders, background) don’t typically conflict with cell background colors because row headers occupy a separate DOM region.

Troubleshooting Item Colors

Issue	Cause	Solution
No color visible	Renderer not assigned to rowHeader	Check `headers.rowHeader.renderer` property
Color not updating	Condition references wrong field	Verify field binding matches column ID
Color too bright/dim	Opacity or color code issue	Adjust hex code or rgba alpha value
Partial rows colored	Logic condition incomplete	Ensure all branches of if/else are handled
Performance lag	Too complex decorator	Simplify conditions; avoid DOM queries

Getting Started

Concepts

Reference

Guides

Troubleshooting

FAQ

Overview

Color Assignment Methods

Method 1: Row Header Color (Renderer-Based)

Method 2: Full Row Styling

Color Configuration Properties

Row Header Color Definition

Color Palette for Risk Levels

Implementation Example

Basic RPN-Based Row Colors

Status-Based Row Colors

Color Application Flow

Color Palettes by Use Case

Risk Management (FMEA/HARA)

Workflow Status

Severity Levels

Advanced Color Techniques

Multi-Property Color Logic

Conditional Text Color

Performance Considerations

CSS Specificity Notes

Troubleshooting Item Colors

See Also

Getting Started

Concepts

Reference

Guides

Troubleshooting

FAQ

​Overview

​Color Assignment Methods

​Method 1: Row Header Color (Renderer-Based)

​Method 2: Full Row Styling

​Color Configuration Properties

​Row Header Color Definition

​Color Palette for Risk Levels

​Implementation Example

​Basic RPN-Based Row Colors

​Status-Based Row Colors

​Color Application Flow

​Color Palettes by Use Case

​Risk Management (FMEA/HARA)

​Workflow Status

​Severity Levels

​Advanced Color Techniques

​Multi-Property Color Logic

​Conditional Text Color

​Performance Considerations

​CSS Specificity Notes

​Troubleshooting Item Colors

​See Also

Overview

Color Assignment Methods

Method 1: Row Header Color (Renderer-Based)

Method 2: Full Row Styling

Color Configuration Properties

Row Header Color Definition

Color Palette for Risk Levels

Implementation Example

Basic RPN-Based Row Colors

Status-Based Row Colors

Color Application Flow

Color Palettes by Use Case

Risk Management (FMEA/HARA)

Workflow Status

Severity Levels

Advanced Color Techniques

Multi-Property Color Logic

Conditional Text Color

Performance Considerations

CSS Specificity Notes

Troubleshooting Item Colors

See Also