Skip to main content

Conditional styles

Use conditional styles to add subtle visual signals to data in DyonaGrid. Styles apply to data columns only; they do not modify technical columns such as selection or Actions.

Try it live in the Lab

Base column style​

Use column.style to apply a base color or backgroundColor to every cell in a data column.

const columns: DyonaGridColumn[] = [
  {field: 'status', headerName: 'Status', style: {color: 'error.main'}},
];

Colors accept CSS or MUI color strings, such as 'error.main', 'rgba(239, 83, 80, 0.12)', and '#ffebee'.

Conditional cell style​

Use column.styleRules to style cells in one column when their row matches one or more conditions.

const columns: DyonaGridColumn[] = [
  {
    field: 'balance', headerName: 'Balance',
    styleRules: [{
      conditions: [{field: 'balance', operator: 'greaterThan', value: 100000}],
      style: {color: 'error.main', backgroundColor: 'rgba(239, 83, 80, 0.12)'},
    }],
  },
];

Conditions can read any field from the complete record, even when the style is applied to only one cell.

{
  field: 'balance', headerName: 'Balance',
  styleRules: [{
    conditions: [{field: 'status', operator: 'equals', value: 'overdue'}],
    style: {backgroundColor: '#ffebee'},
  }],
}

Conditional row style​

Pass rowStyleRules to DyonaGrid to apply a style to every data cell in matching rows.

<DyonaGrid
  columns={columns}
  rowStyleRules={[{
    conditions: [{field: 'status', operator: 'equals', value: 'overdue'}],
    style: {color: 'error.main', backgroundColor: 'rgba(239, 83, 80, 0.12)'},
  }]}
/>

Conditions and matching mode​

Each rule has a conditions array. With an omitted mode or mode: 'all', every condition must match. With mode: 'any', one matching condition is enough.

{
  mode: 'any',
  conditions: [
    {field: 'status', operator: 'equals', value: 'overdue'},
    {field: 'balance', operator: 'greaterThan', value: 100000},
  ],
  style: {backgroundColor: '#ffebee'},
}

Precedence​

For each data cell, styles are merged in this order:

column.style → rowStyleRules → column.styleRules

More specific or later matching rules can override color or backgroundColor set earlier. This lets a conditional cell style refine a base column style or a row-wide style.