Conditional Styles using Predicates

Summary

Most Format Column Style Conditions use a Predicate
This is evaluated by AdapTableQL - AdapTable's Query Language
A Format Column Condition can contain multiple Predicates if required
Conditions can use a Referenced Predicate - with different styled and evaluated Columns

Predicates are the most common use case for setting a Format Column Condition.

Standard Predicate Conditions

Predicates are easy to use to AdapTable and can be created visually at run-time through a wizard.

Predicates are ideal when the evaluation requires a single column or a single operation.

For example Price is Positive, Country is NonBlank, Amount is GreaterThan 20 etc.

Find Out More

See full explanations of how Predicates work in AdapTable in the AdapTableQL Predicates Guide

Format Column - Predicate Condition

Fork Fork

This demo shows 3 Format Columns using Conditions with Predicates:
- Issue Change Column displays green font where value is positive
- Issue Change Column displays red font where value is negative
- Any string column will show as Bold and Upper case if the value includes '.js'

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Format Column Predicate Condition',
  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: 'formatColumn-text',
          Scope: {
            DataTypes: ['text'],
          },
          DisplayFormat: {
            Formatter: 'StringFormatter',
            Options: {
              Case: 'Upper',
            },
          },
          Style: {
            FontWeight: 'Bold',
          },
          Rule: {
            Predicates: [
              {
                PredicateId: 'Contains',
                Inputs: ['js'],
              },
            ],
          },
        },
      ],
    },
    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,
        },
      ],
    },
  },
};

Multiple Predicate Conditions

Prior to Version 14 only a single Predicate could be supplied for each Format Column Condition.

There is now no limit on how many Predicates can be provided in each AlertRule.

This allows for a more powerful and flexibile rules to be set.

Hint

It allows users to use Predicates in preference to more complicated (and sometimes off-putting) Expressions

Format Column - Multiple Predicate Conditions

Fork Fork

This demo shows a Format Column Condition (Bold and Upper) with Multiple Predicates:
- the Contains predicate with an input of "js"
- the NotIn predicate with an input of "cyclejs"

Expand to see the Format Column Definition with Multiple Predicates

FormatColumn: {
  FormatColumns: [
    {
      Name: 'FormatColumn-text-116',
      Scope: {
        DataTypes: ['text'],
      },
      DisplayFormat: {
        Formatter: 'StringFormatter',
        Options: {
          Case: 'Upper',
        },
      },
      Style: {
        FontWeight: 'Bold',
      },
      Rule: {
        Predicates: [
          {
            PredicateId: 'Contains',
            Inputs: ['js'],
          },
          {
            PredicateId: 'NotIn',
            Inputs: ['cyclejs'],
          },
        ],
      },
    },
  ],
},

Referenced Predicate Conditions

Typically the Column defined in the Scope will be the one that is evaluated by the Predicate.

However this can be changed so there are separate Scopes for Column and Predicate.

This allows you, for example, to bold ColumnA values when the data in ColumnB meets the Rule in the Predicate.

Hint

This is useful if the column being evaluated is hidden or only accessible by scrolling, so a visible column is styled
Or if you want to style the first column in the Row and pin it

This is achieved by:

setting the Format Column Scope to be the Column which will be rendered
adding a ColumnId to the Predicate defined in the Format Column which will be the column evaluated

Note

This ColumnId property in the Predicate is optional; if not supplied, the Format Column Scope is used

Format Column - Referenced Predicate Conditions

Fork Fork

This example shows how to use a Referenced Predicate:
- the Predicate Scope is Github Watchers and the Rule is GreaterThan 3300
- the Format Column Scope is Name (which is also pinned) and that Column displayed the Format Column Style
Note: This could also have been achieved by using an Expression of [github_watchers] > 3300 and the same Format Column Scope

Expand to see the Format Column Definition with a Referenced Predicate

FormatColumn: {
  FormatColumns: [
    {
      Name: 'FormatColumn-name-117',
      Style: {
        FontWeight: 'Bold',
        BorderColor: 'Yellow',
      },
      Scope: {
        ColumnIds: ['name'],
      },
      Rule: {
        Predicates: [
          {
            ColumnId: 'github_watchers',
            PredicateId: 'GreaterThan',
            Inputs: [3300],
          },
        ],
      },
    },
  ],
},

Custom Predicate Conditions

Format Column Conditions can also use Custom Predicates.

These are bespoke Predicates defined by developers at design-time and then available for use in AdapTable.

Format Column: Custom Predicates

Fork Fork

This demo creates 3 Custom Predicate Definitions and attaches a Format Column Condition to each:
- Popular on Github Stars Column with Format of Bold Font on Blue Background
- Vanilla on Language Column with Format of Yellow Font on Brown Background
- Long String on Description Column (using Input of 40) with Format of Italics and Purple Border

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Format Column Custom Predicates',
  predicateOptions: {
    customPredicateDefs: [
      {
        id: 'big_github',
        label: 'Popular',
        columnScope: {
          ColumnIds: ['name'],
        },
        moduleScope: ['formatColumn'],
        handler(params: PredicateDefHandlerContext) {
          const githubStarsCount: number = params.node.data.github_stars;
          const watchersCount: number = params.node.data.github_watchers;
          return githubStarsCount > 50000 && watchersCount > 500 ? true : false;
        },
      },
      {
        id: 'vanilla',
        label: 'Vanilla',
        columnScope: {
          ColumnIds: ['language'],
        },
        moduleScope: ['formatColumn'],
        handler(params: PredicateDefHandlerContext) {
          return params.value == 'JavaScript' || params.value == 'HTML';
        },
      },

      {
        id: 'long_string',
        label: 'Long String',
        columnScope: {DataTypes: ['text']},
        moduleScope: ['formatColumn'],
        handler(params: PredicateDefHandlerContext) {
          if (params.inputs) {
            const input = params.inputs[0];
            return (params.value as String).length > input;
          }
          return false;
        },
        inputs: [{type: 'number'}],
        toString: ({inputs}) => `cell length > ${inputs[0]}`,
      },
    ],
  },
  initialState: {
    Theme: {CurrentTheme: 'dark'},
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'formatColumn-language',
          Style: {
            BackColor: 'Brown',
            ForeColor: 'Yellow',
            Alignment: 'Center',
          },
          Scope: {
            ColumnIds: ['language'],
          },
          Rule: {
            Predicates: [
              {
                PredicateId: 'vanilla',
              },
            ],
          },
        },
        {
          Name: 'formatColumn-github_stars',
          Style: {
            BackColor: '#87cefa',
            FontWeight: 'Bold',
          },
          Scope: {
            ColumnIds: ['github_stars'],
          },
          Rule: {
            Predicates: [
              {
                PredicateId: 'big_github',
              },
            ],
          },
        },

        {
          Name: 'formatColumn-description',
          Style: {
            FontStyle: 'Italic',
            BorderColor: 'Purple',
          },
          Scope: {
            ColumnIds: ['description'],
          },
          Rule: {
            Predicates: [
              {
                PredicateId: 'long_string',
                Inputs: [40],
              },
            ],
          },
        },
      ],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['ColumnFilter'],
        },
      ],
    },

    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'language',
            'name',
            'github_stars',
            'updated_at',
            'description',
            'pushed_at',
            'github_watchers',
            'open_issues_count',
            'created_at',
            'license',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Find Out More

See Guide to Creating Custom Predicates in AdapTableQL for more information

PreviousConditional Styling NextExpression Conditions

Framework: