Skip to main content

​
How Cell Styles Work

The styling system uses three interconnected configuration properties:
  1. styles — defines named CSS class rules
  2. cellDecorators — JavaScript functions that apply CSS classes conditionally based on cell values
  3. cellCss / headerGroupCss — static CSS class assignment per column

​
Step 1: Define Style Classes

Add CSS class definitions to the styles object in your risksheet.json. Each key is a CSS selector pattern and the value is the CSS rule: 
{
  "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; }"
  }
}
The grid applies default styling to cells. Your custom styles must include !important on background-color and color properties to override these defaults. Without !important, your custom colors will not appear.

​
Style Naming Patterns

PatternPurposeExample
.classNameGeneral cell class.boldCol, .rpn1
.firstRow .groupNameFirst row of a column group.firstRow .headSysReq
.lastRow .groupNameLast row of a column group.lastRow .headSysReq

​
Step 2: Apply Static Styles to Columns

To apply a CSS class to every cell in a column regardless of its value, use the cellCss property on the column definition: 
{
  "columns": [
    {
      "id": "rpn",
      "header": "RPN",
      "binding": "rpn",
      "formula": "commonRpn",
      "cellCss": "boldCol"
    }
  ]
}
For header group styling, use headerGroupCss: 
{
  "columns": [
    {
      "id": "sev",
      "header": "Severity",
      "headerGroup": "Initial Assessment",
      "headerGroupCss": "headInitialAssessment"
    }
  ]
}

​
Step 3: Apply Conditional Styles via Decorators

For dynamic styling based on cell values, define cell decorator functions and pair them with style definitions: 
{
  "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); }"
  },
  "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; }"
  }
}
The cell decorator function receives an info object with these properties:
PropertyDescription
info.valueCurrent cell value
info.cellDOM element of the cell
info.itemFull work item data object
Cell decorator functions compare against enum IDs, not display values. For example, use val === 'yes' (the enum ID), not val === 'Y' (the display name). Using the display value will cause the conditional styling to fail silently.

​
Step 4: Style Column Group Headers

Use the firstRow and lastRow pseudo-selectors to apply different styling to the first and last rows within a column group: 
{
  "styles": {
    ".firstRow .headSysReq": "{ background-color: rgba(62, 175, 63, 0.12) !important; color: #2A792D !important; }",
    ".lastRow .headSysReq": "{ background-color: #FFF !important; color: #2A792D !important; }"
  }
}
This creates visual banding where the first row of a group gets a tinted background and the last row returns to white.

​
Step 5: Configure Header Heights

Control the pixel height of column headers and column group headers using the headers property: 
{
  "headers": {
    "columnHeader": {
      "height": 32
    },
    "columnGroupHeader": {
      "height": 32
    }
  }
}
Increase the columnHeader.height value to allow long header text to wrap across multiple lines. Combine with appropriate column width settings for optimal readability.

​
Step 6: Limit Row Height

Risksheet does not have a built-in row height limit, but you can control it using a cell decorator with CSS max-height: 
{
  "styles": {
    ".limitHeight": "{ max-height: 80px; overflow: hidden; }"
  },
  "cellDecorators": {
    "limitDescription": "function(info){ $(info.cell).toggleClass('limitHeight', true); }"
  },
  "columns": [
    {
      "id": "description",
      "header": "Description",
      "cellRenderer": "limitDescription"
    }
  ]
}

​
Export Considerations

Cell styles carry over to exports differently depending on the format:
Export FormatStyle Behavior
ExcelBackground colors and text colors from the grid are preserved
PDFCell formatting is controlled by the custom PDF export script, not the grid styles

​
Verification

After saving your configuration changes and reloading the Risksheet page, you should now see:
  • Custom background colors and text colors applied to cells matching your style definitions
  • Conditional coloring that changes dynamically as cell values are edited
  • Column group headers with distinct first-row and last-row styling
  • Bold text or other font styling on columns with cellCss assigned

​
See Also

KB ArticlesSupport TicketsSource Code
  • AppConfig.ts
  • risksheet.json
  • ExportToExcel.ts
  • AppConfigHelper.ts
  • ExportToPdf.ts