Skip to main content

​
Overview

Cell decorators are defined in the cellDecorators configuration section and are referenced by column configuration or header renderer properties. Each decorator function receives an info object containing the cell element, cell value, and row item data, allowing you to inspect values and apply CSS classes conditionally. diagram

​
Function Structure

Cell decorators are JavaScript function strings stored in the configuration. They receive an info parameter with the following properties:
PropertyTypeDescription
info.cellDOM ElementThe HTML cell element being decorated
info.valueanyThe cell’s display value (used for value-based decorators)
info.itemobjectThe entire row’s data object (used for row-based styling)
info.columnobjectThe column configuration object

​
Configuration Properties

PropertyTypeDefaultDescription
cellDecoratorsobject{}Collection of named decorator functions
cellDecorators.<name>string—JavaScript function that applies CSS classes to cells
column.cellRendererstring—References a decorator function to apply to this column
headers.rowHeader.rendererstring—References a decorator function for row header styling

​
Common Patterns

​
Value-Based Decorators

Decorators that style cells based on their own value: 
"cellDecorators": {
  "rpn": "function(info) {
    var val = info.value;
    $(info.cell).toggleClass('rpn1', val > 0 && val <= 150);
    $(info.cell).toggleClass('rpn2', val > 150 && val <= 350);
    $(info.cell).toggleClass('rpn3', val > 350);
  }"
}
This pattern inspects info.value and applies different CSS classes based on ranges. Each class is defined in the styles section.

​
Row-Based Decorators

Decorators that style cells based on other row values: 
"cellDecorators": {
  "rowHeaderRpnNew": "function(info) {
    var val = info.item['rpnNew'];
    $(info.cell).toggleClass('rpn1', val > 0 && val <= 150);
    $(info.cell).toggleClass('rpn2', val > 150 && val <= 350);
    $(info.cell).toggleClass('rpn3', val > 350);
  }"
}
This pattern reads a specific field from info.item (the row’s data object) and applies styling based on that value. Useful for row header styling where you want to style the header based on column data.

​
Enum-Based Decorators

When decorating cells based on enum values, use the enum ID (not the display value): 
"cellDecorators": {
  "enumStatus": "function(info) {
    var status = info.item['status'];
    $(info.cell).toggleClass('statusActive', status === 'yes');
    $(info.cell).toggleClass('statusInactive', status === 'no');
  }"
}
Cell decorators must compare against the enum ID (internal value), not the enum display name. For example, if an enum option has ID 'yes' but displays as 'Yes', compare against 'yes'. Similarly, use 'no' instead of 'No' in your condition.

​
CSS Class Application

Cell decorators apply CSS classes using jQuery’s toggleClass() method (or vanilla DOM methods). The toggleClass() function signature: 
$(element).toggleClass('className', condition);
ParameterTypeDescription
classNamestringThe CSS class name to toggle
conditionbooleanIf true, the class is added; if false, it’s removed

​
CSS Class Priority

When multiple decorators apply classes to the same cell, or when decorator classes conflict with existing styles, use the !important flag in your CSS definitions to ensure proper precedence: 
"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;"
}
Use !important when:
  • Multiple decorators may apply to the same cell
  • Your styles conflict with FlexGrid’s built-in styles
  • You want to ensure a decorator’s style always takes precedence

​
Column Binding Configuration

To apply a cell decorator to a column, reference it in the column’s cellRenderer property: 
{
  "id": "rpnValue",
  "header": "RPN",
  "binding": "rpn",
  "cellRenderer": "rpn",
  "width": 80
}
The cellRenderer property must match a decorator name defined in cellDecorators.

​
Row Header Styling

To apply decorators to the row header column, configure the headers.rowHeader.renderer property: 
{
  "headers": {
    "rowHeader": {
      "renderer": "rowHeaderRpnNew",
      "width": 90
    }
  }
}
This references the rowHeaderRpnNew decorator function, which receives the row header cell as info.cell and can access row data via info.item.

​
Complete Example

Here’s a complete configuration example combining decorators and styles for FMEA risk visualization: 
{
  "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);
    }",
    "rowHeaderRpnNew": "function(info) {
      var val = info.item['rpnNew'];
      $(info.cell).toggleClass('rpn1', val > 0 && val <= 150);
      $(info.cell).toggleClass('rpn2', val > 150 && val <= 350);
      $(info.cell).toggleClass('rpn3', val > 350);
    }"
  },
  "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;"
  },
  "columns": [
    {
      "id": "rpnValue",
      "header": "RPN",
      "binding": "rpn",
      "cellRenderer": "rpn",
      "width": 80
    }
  ],
  "headers": {
    "rowHeader": {
      "renderer": "rowHeaderRpnNew",
      "width": 90
    }
  }
}
In this example:
  1. The rpn decorator colors RPN cells based on thresholds
  2. The rowHeaderRpnNew decorator colors row headers based on the rpnNew field value
  3. Both decorators reference CSS classes defined in the styles section
  4. The RPN column references the rpn decorator
  5. The row header references the rowHeaderRpnNew decorator
Result: Risk Priority Numbers are highlighted in green (low), yellow (medium), or red (high) both in the column and in the row header, providing instant visual risk assessment.
KB ArticlesSupport TicketsSource Code
  • AppConfig.ts
  • risksheet.json
  • AppConfigHelper.ts
  • ExportToExcel.ts
  • CellPreviewFormatter.ts