Saltar al contenido principal

Estilos condicionales

Usá estilos condicionales para agregar señales visuales suaves a los datos de DyonaGrid. Los estilos se aplican solo a columnas de datos; no modifican columnas técnicas como selección o Actions.

Probar en vivo en el Lab

Estilo base de columna​

Usá column.style para aplicar un color o backgroundColor base a cada celda de una columna de datos.

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

Los colores aceptan strings CSS o MUI, como 'error.main', 'rgba(239, 83, 80, 0.12)' y '#ffebee'.

Estilo condicional de celda​

Usá column.styleRules para aplicar estilos a las celdas de una columna cuando su fila cumpla una o más 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)'},
    }],
  },
];

Las condiciones pueden consultar cualquier campo del registro completo, aunque el estilo se aplique solo a una celda.

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

Estilo condicional de fila​

Pasá rowStyleRules a DyonaGrid para aplicar un estilo a cada celda de datos de las filas que cumplan la regla.

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

Condiciones y modo de coincidencia​

Cada regla tiene un array conditions. Con mode omitido o mode: 'all', deben cumplirse todas las condiciones. Con mode: 'any', alcanza con que se cumpla una.

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

Precedencia​

Para cada celda de datos, los estilos se combinan en este orden:

column.style → rowStyleRules → column.styleRules

Las reglas coincidentes más específicas o posteriores pueden sobrescribir color o backgroundColor definidos antes. Esto permite que un estilo condicional de celda refine un estilo base de columna o un estilo de fila.