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 an Expression 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 gray where 'InvoicedCost' column value is over 1000 (this uses an Expression rather than a Predicate and a Scope of 'All: true')
  • Employee Column uses the style pre-defined in the employeeStyle ClassName where the cell value is Stephen or Laura
    (Note: this uses the 'new_starter' custom predicate defined in the customPredicateDefs section of Adaptable Options.)

Generating dummy data, please wait ...