About this example

Multiple rules on a JavaScript data source:

• Name equals 1Password — pass/fail styles.
• CPU greater than 10 — numeric highlight.
• Product OR Company equals 1Password — OR logic.
• StartTime after threshold — date compare.
• HasExited is true — boolean with pass/fail styles.

Configuration

columnHighlighter: {
  rules: [
    {
      conditionsContainer: [{ logic: 'AND', conditions: [{ columnName: 'Name', operator: 'eq', type: 'string', value: '1Password' }] }],
      targets: [{ column: 'Name', css: { 'background-color': '#fa8072', color: '#000' } }],
      failTargets: [{ column: 'Name', css: { 'background-color': '#f5f5f5', color: '#666', 'text-decoration': 'underline' } }]
    },
    {
      conditionsContainer: [{ logic: 'AND', conditions: [{ columnName: 'CPU', operator: 'gt', type: 'number', value: 10 }] }],
      targets: [{ column: 'CPU', css: { 'background-color': '#fff3cd', color: '#856404', 'font-weight': 'bold', 'border': '1px solid #ffecb5' } }]
    },
    {
      conditionsContainer: [{ logic: 'OR', conditions: [
        { columnName: 'Product', operator: 'eq', type: 'string', value: '1Password' },
        { columnName: 'Company', operator: 'eq', type: 'string', value: '1Password' }
      ] }],
      targets: [
        { column: 'Product', css: { 'background-color': '#d1e7dd', color: '#0f5132', 'font-style': 'italic' } },
        { column: 'Company', css: { 'background-color': '#d1e7dd', color: '#0f5132', 'font-style': 'italic' } }
      ]
    },
    {
      conditionsContainer: [{ logic: 'AND', conditions: [{ columnName: 'StartTime', operator: 'gt', type: 'date', valueDate: { year: 2025, month: 8, day: 24, hours: 0, minutes: 0, seconds: 0 }, dateTimeFormat: 'YYYY-MM-DD HH:mm:ss' }] }],
      targets: [{ column: 'StartTime', css: { 'background-color': '#cfe2ff', color: '#052c65' } }]
    },
    {
      conditionsContainer: [{ logic: 'AND', conditions: [{ columnName: 'HasExited', operator: 'eq', type: 'bool', value: true }] }],
      targets: [{ column: 'HasExited', css: { 'background-color': '#f8d7da', color: '#842029', 'text-decoration': 'line-through' } }],
      failTargets: [{ column: 'HasExited', css: { 'background-color': '#d1e7dd', color: '#0f5132' } }]
    }
  ]
}