Conditional Style Demo

Conditional Styles allow you to create rules that decide how columns and rows are styled.

The 'Scope' of the style determines where it can be applied: ie. whole row, one or more columns, or one or more column data types.

The Rule is based on a 'Predicate' - only the Predicates associated with the selected scope are available.

For more complicated rules there is the option, instead, to use a Query which will enable evaluation across multiple columns using more advanced criteria.

When the rule is met the column / row will be styled according to the style properties provided. Alternatively you can specify a css style name (which you provide).

This example has 5 Conditional Styles:

  • All colunns of DataType: Number have a green font when they are positive (using the 'Positive' predicate)
  • All colunns of DataType: Number have a red font when they are negative (using the 'Negative' predicate)
  • 'Item Cost' column is italicised with a yellow background where it is greater than 60 (using the 'GreaterThan' predicate)
  • Whole row is lightblue where 'InvoicedCost' column value is over 1000 (this uses an Expression rather than a Predicate and a Scope of 'All: true')
  • Employee Column is bold where the value is Stephen or Laura (this uses the 'new_starter' custom predicate defined in the customPredicateDefs section of Adaptable Options.

Generating dummy data, please wait ...