Conditional Styling

Summary

Optional Rules on Format Column definitions — apply a style or display format only when a cell or row matches
Scoped to specific columns or whole rows
Rule types: Predicate or Expression (AdapTableQL)

Note

This section sits under Styles in the handbook — conditional rules are most often used to highlight cells, though the same Rule property can gate a Display Format when needed.

Format Columns can be provided with a Rule - which specifies whether or not to render the Format.

This allows users to create very visually striking Grids with a minimum of effort.

Conditions can be applied to both elements of Column Formatting:

The Rule can be either of the two types of evaluation which AdapTableQL supports:

Predicate(s) - either System or Custom
a Boolean Expression

Note

Both Predicates and Boolean Expressions are evaluated using AdapTableQL
Expressions are more powerful as they can contain multiple criteria and AND / OR logic

Conditions are evaluated in Real Time so Format Columns are applied automatically as Grid data updates.

Caution

Format Columns with Conditions are only applied when the cell values satisfy all supplied criteria
e.g. All Predicate rules (if they are provided), or all the criteria in the Expression (if that is being used) must be true

Format Column - Conditions

Fork Fork

This example shows a Column Format containing Conditions based on Predicates and Expressions
- 2 Predicates on the Issue Change Column showing positive numbers as Green and negative numbers as Red
- Expression with Scope of All (i.e. Whole Row) and Style of Blue Background and Brown Font where Language is 'TypeScript' and License is 'MIT License'

import {AdaptableOptions} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Format Column Conditions',
  initialState: {
    Theme: {CurrentTheme: 'dark'},
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'formatColumn-week_issue_change',
          Style: {
            ForeColor: 'Green',
          },
          Scope: {
            ColumnIds: ['week_issue_change'],
          },
          Rule: {
            Predicates: [
              {
                PredicateId: 'Positive',
              },
            ],
          },
        },
        {
          Name: 'formatColumn-week_issue_change',
          Style: {
            ForeColor: 'Red',
          },
          Scope: {
            ColumnIds: ['week_issue_change'],
          },
          Rule: {
            Predicates: [
              {
                PredicateId: 'Negative',
              },
            ],
          },
        },
        {
          Name: 'style-all',
          Style: {
            BackColor: '#8fd3fe',
            ForeColor: 'Brown',
          },
          Scope: {
            All: true,
          },
          Rule: {
            BooleanExpression:
              '[language] = "TypeScript" AND [license] = "MIT License"  ',
          },
        },
      ],
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'license',
            'language',
            'week_issue_change',
            'github_watchers',
            'github_stars',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'open_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

FAQ

Do I have to provide a Condition? No, Formats can be applied across all cells in all columns in Scope without any Condition being supplied

AdapTable Resources

PreviousStyles NextPredicate Conditions