About this example

Shows multiple rule types working together:

• Rule A: Name equals 1Password — pass/fail styling.
• Rule B: CPU greater than 10 — numeric comparison.
• Rule C: Product OR Company equals 1Password — OR logic across columns.
• Rule D: StartTime after threshold — date compare with format.
• Rule E: HasExited is true — boolean match 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' } }]
    }
  ]
}