Pular para o conteúdo principal

Estilos condicionais

Use estilos condicionais para adicionar sinais visuais suaves aos dados em DyonaGrid. Os estilos são aplicados somente às colunas de dados; eles não modificam colunas técnicas, como seleção ou Actions.

Testar ao vivo no Lab

Estilo base de coluna​

Use column.style para aplicar um color ou backgroundColor base a cada célula de uma coluna de dados.

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

As cores aceitam strings CSS ou MUI, como 'error.main', 'rgba(239, 83, 80, 0.12)' e '#ffebee'.

Estilo condicional de célula​

Use column.styleRules para aplicar estilos às células de uma coluna quando sua linha atender a uma ou mais conditions.

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

As condições podem consultar qualquer campo do registro completo, mesmo quando o estilo é aplicado somente a uma célula.

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

Estilo condicional de linha​

Passe rowStyleRules para DyonaGrid para aplicar um estilo a cada célula de dados das linhas que atenderem à regra.

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

Condições e modo de correspondência​

Cada regra tem um array conditions. Com mode omitido ou mode: 'all', todas as condições devem ser atendidas. Com mode: 'any', basta uma condição ser atendida.

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

Precedência​

Para cada célula de dados, os estilos são combinados nesta ordem:

column.style → rowStyleRules → column.styleRules

Regras correspondentes mais específicas ou posteriores podem sobrescrever color ou backgroundColor definidos antes. Isso permite que um estilo condicional de célula refine um estilo base de coluna ou um estilo de linha.