Conditional Styling and Formatting

Summary

Conditions can be applied to Column Formatting so it renders only when the Cell matches a specified Rule
Either specific columns - or whole rows - can be subject to the condition
The Rule (or Condition) can be either a Predicate or an Expression

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,
        },
      ],
    },
  },
};

Conditional Styles

(Recorded with AdapTable v16.0)

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

PreviousTechnical Reference NextPredicate Conditions

Framework: