About this example

Demonstrates basing conditions on one field while highlighting other fields, and using multiple conditions:

• Status == Green → highlight Status.
• Status == Overdue → highlight Score and Notes.
• Status == Red AND Score >= 80 → highlight Name, Status, Score; else dim Score slightly.

Configuration

columnHighlighter: {
  rules: [
    { conditionsContainer: [{ logic: 'AND', conditions: [ { columnName: 'Status', operator: 'eq', type: 'string', value: 'Green' } ] }],
      targets: [ { column: 'Status', css: { 'background-color': '#d1e7dd', color: '#0f5132' } } ] },
    { conditionsContainer: [{ logic: 'AND', conditions: [ { columnName: 'Status', operator: 'eq', type: 'string', value: 'Overdue' } ] }],
      targets: [
        { column: 'Score', css: { 'background-color': '#fff3cd', color: '#664d03' } },
        { column: 'Notes', css: { 'background-color': '#fff3cd', color: '#664d03' } }
      ] },
    { conditionsContainer: [{ logic: 'AND', conditions: [
        { columnName: 'Status', operator: 'eq', type: 'string', value: 'Red' },
        { columnName: 'Score',  operator: 'ge', type: 'number', value: 80 }
      ] }],
      targets: [
        { column: 'Name',   css: { 'background-color': '#f8d7da', color: '#842029', 'font-weight': 'bold' } },
        { column: 'Status', css: { 'background-color': '#f8d7da', color: '#842029' } },
        { column: 'Score',  css: { 'background-color': '#f8d7da', color: '#842029' } }
      ],
      failTargets: [ { column: 'Score', css: { 'opacity': '0.95' } } ] }
  ]
}