Conditional Styles

AdapTable allows you to conditionally apply a Cell Style based on the cell value.

Styled Cell definition with a Condition
{
  label: 'Style for github watchers 100-500 on MIT projects',
  scope: {
    columns: ['github_watchers'],
  },
  condition: {
    type: 'booleanExpression',
    expression: '[github_watchers] > 100 AND [github_watchers] < 500 AND [license] CONTAINS "MIT"',
  },
  format: {
    prefix: '👀 ',
    cellFormatType: 'text',
  },
  style: {
    color: 'green',
  },
},

Note

  • In the condition expression, you can use any columns from the grid
  • See the AdapTableQL section, to find out more about our powerful query language
Styled cells with AdaptableQL expression as condition
Fork

This demo styles the github_watchers column conditionally, only those cells for which the following condition is true:

[github_watchers] > 100 AND [github_watchers] < 500 AND [license] CONTAINS "MIT"