React formato condicional de hoja de cálculo

    El componente React Spreadsheet le permite formatear condicionalmente las celdas de una hoja de trabajo. Esto le permite resaltar diferentes partes de sus datos según una condición.

    React Spreadsheet Conditional Formatting Example

    Conditional Formatting Overview

    Puede configurar el formato condicional de una hoja de trabajo en particular utilizando los muchos métodos Add expuestos en la colección conditionalFormats de esa hoja de trabajo. El primer parámetro de estos métodos Add es la región de cadena de la hoja de trabajo a la que le gustaría aplicar el formato condicional.

    Muchos de los formatos condicionales que puede agregar a su hoja de cálculo tienen una propiedad cellFormat que determina la forma en que deben verse las celdas cuando la condición en ese formato condicional es verdadera. Por ejemplo, puede utilizar las propiedades adjuntas a esta propiedad cellFormat, como fill y font para determinar la configuración de fondo y fuente de sus celdas, respectivamente.

    Cuando se crea un formato condicional y se aplica un cellFormat, hay un subconjunto de propiedades que actualmente son compatibles con la celda de la hoja de cálculo. Las propiedades que actualmente se respetan fuera de cellFormat son fill, propiedades Border, formatString y algunas propiedades font como tachado, subrayado, cursiva, negrita y color. Muchos de estos se pueden ver en el fragmento de código siguiente.

    Hay algunos formatos condicionales que no tienen una propiedad cellFormat, ya que su visualización en las celdas se comporta de manera diferente. Estos formatos condicionales son DataBarConditionalFormat, ColorScaleConditionalFormat e IconSetConditionalFormat.

    Al cargar un libro preexistente desde Excel, los formatos se conservarán cuando se cargue ese libro. Lo mismo ocurre cuando guarda el libro en un archivo de Excel.

    A continuación se enumeran los formatos condicionales admitidos en el control React IgrSpreadsheet:

    • AverageConditionalFormat: agregado mediante el método addAverageCondition, este formato condicional expone propiedades que controlan los atributos visuales de una celda de la hoja de cálculo en función de si el valor de una celda está por encima o por debajo del promedio o la desviación estándar para el rango asociado.
    • BlanksConditionalFormat: agregado mediante el método addBlanksCondition, este formato condicional expone propiedades que controlan los atributos visuales de una celda de la hoja de cálculo en función de si el valor de la celda no está establecido.
    • ColorScaleConditionalFormat: agregado mediante el método addColorScaleCondition, este formato condicional expone propiedades que controlan el color de una celda de la hoja de cálculo en función del valor de la celda en relación con los valores de umbral mínimo, medio y máximo.
    • DataBarConditionalFormat: agregado mediante el método addDataBarCondition, este formato condicional expone propiedades que muestran barras de datos en una celda de la hoja de cálculo según el valor de la celda en relación con el rango de valores asociado.
    • DateTimeConditionalFormat: agregado mediante el método addDateTimeCondition, este formato condicional expone propiedades que controlan los atributos visuales de una celda de la hoja de cálculo en función de si el valor de fecha de una celda se encuentra dentro de un rango de tiempo determinado.
    • DuplicateConditionalFormat: agregado mediante el método addDuplicateCondition, este formato condicional expone propiedades que controlan los atributos visuales de una celda de la hoja de cálculo en función de si el valor de una celda es único o está duplicado en el rango asociado.
    • ErrorsConditionalFormat: agregado mediante el método addErrorsCondition, este formato condicional expone propiedades que controlan los atributos visuales de una celda de la hoja de cálculo en función de si el valor de la celda es válido.
    • FormulaConditionalFormat: agregado mediante el método addFormulaCondition, este formato condicional expone propiedades que controlan los atributos visuales de una celda de la hoja de cálculo en función de si el valor de la celda cumple con los criterios definidos por una fórmula.
    • IconSetConditionalFormat: agregado mediante el método addIconSetCondition, este formato condicional expone propiedades que muestran iconos en una celda de la hoja de cálculo según el valor de la celda en relación con los valores de umbral.
    • NoBlanksConditionalFormat: agregado mediante el método addNoBlanksCondition, este formato condicional expone propiedades que controlan los atributos visuales de una celda de la hoja de cálculo en función de si el valor de la celda está establecido.
    • NoErrorsConditionalFormat: agregado mediante el método addNoErrorsCondition, este formato condicional expone propiedades que controlan los atributos visuales de una celda de la hoja de cálculo en función de si el valor de la celda es válido.
    • OperatorConditionalFormat: agregado mediante el método addOperatorCondition, este formato condicional expone propiedades que controlan los atributos visuales de una celda de la hoja de cálculo en función de si el valor de la celda cumple con los criterios definidos por un operador lógico.
    • RankConditionalFormat: agregado mediante el método addRankCondition, este formato condicional expone propiedades que controlan los atributos visuales de una celda de la hoja de cálculo en función de si el valor de una celda está dentro del rango superior o inferior de valores en el rango asociado.
    • TextOperatorConditionalFormat: agregado mediante el método addTextCondition, este formato condicional expone propiedades que controlan los atributos visuales de una celda de la hoja de cálculo en función de si el valor de texto de una celda cumple con los criterios definidos por una cadena y un valor FormatConditionTextOperator colocado en los parámetros del método addTextCondition.
    • UniqueConditionalFormat: agregado mediante el método addUniqueCondition, este formato condicional expone propiedades que controlan los atributos visuales de una celda de la hoja de cálculo en función de si el valor de una celda es único en el rango asociado.

    Dependencies

    Para agregar formato condicional al control IgrSpreadsheet, deberá importar las siguientes dependencias:

    import { CellFill } from "igniteui-react-excel";
import { Color } from 'igniteui-react-core';
import { ColorScaleType } from "igniteui-react-excelScaleType";
import { FormatConditionAboveBelow } from 'igniteui-react-excel';
import { FormatConditionIconSet } from 'igniteui-react-excel';
import { FormatConditionOperator } from 'igniteui-react-excel';
import { FormatConditionTextOperator } from 'igniteui-react-excel';
import { FormatConditionTimePeriod } from 'igniteui-react-excel';
import { FormatConditionTopBottom } from "igniteui-react-excel";
import { WorkbookColorInfo } from 'igniteui-react-excel';

    Code Snippet

    El siguiente fragmento de código demuestra cómo agregar cada uno de los formatos condicionales a una hoja de cálculo en el control IgrSpreadsheet:

    let sheet = this.spreadsheet.activeWorksheet;

let red = new Color();
red.colorString = "#ff0000";

let blue = new Color();
blue.colorString = "#0000ff";

let green = new Color();
green.colorString = "#00ff00";

let gray = new Color();
gray.colorString = "#d3d3d3";

let avgFormat = sheet.conditionalFormats().addAverageCondition("A1:A10", FormatConditionAboveBelow.AboveAverage);
avgFormat.cellFormat.font.colorInfo = new WorkbookColorInfo(red);

let blanksFormat = sheet.conditionalFormats().addBlanksCondition("B1:B10");
blanksFormat.cellFormat.fill = CellFill.createSolidFill(new WorkbookColorInfo(gray));

let colorFormat = sheet.conditionalFormats().addColorScaleCondition("C1:C10", ColorScaleType.ThreeColor);
colorFormat.minimumThreshold.formatColor = new WorkbookColorInfo(red);
colorFormat.midpointThreshold.formatColor = new WorkbookColorInfo(blue);
colorFormat.maximumThreshold.formatColor = new WorkbookColorInfo(green);

let dataBarFormat = sheet.conditionalFormats().addDataBarCondition("D1:D10");

let dateTimeFormat = sheet.conditionalFormats().addDateTimeCondition("E1:E10", FormatConditionTimePeriod.NextWeek);
dateTimeFormat.cellFormat.font.colorInfo = new WorkbookColorInfo(red);

let duplicateFormat = sheet.conditionalFormats().addDuplicateCondition("F1:F10");
duplicateFormat.cellFormat.font.colorInfo = new WorkbookColorInfo(blue);

let errorFormat = sheet.conditionalFormats().addErrorsCondition("G1:G10");
errorFormat.cellFormat.font.colorInfo = new WorkbookColorInfo(green);

let formulaFormat = sheet.conditionalFormats().addFormulaCondition("H1:H10", "=H1>2");
formulaFormat.cellFormat.font.colorInfo = new WorkbookColorInfo(red);

let iconFormat = sheet.conditionalFormats().addIconSetCondition("I1:I10", FormatConditionIconSet.IconSet3TrafficLights1);

let noBlanksFormat = sheet.conditionalFormats().addNoBlanksCondition("J1:J10");
noBlanksFormat.cellFormat.fill = CellFill.createSolidFill(new WorkbookColorInfo(gray));

let noErrorFormat = sheet.conditionalFormats().addErrorsCondition("K1:K10");
noErrorFormat.cellFormat.font.colorInfo = new WorkbookColorInfo(red);

let operatorFormat = sheet.conditionalFormats().addOperatorCondition("L1:L10", FormatConditionOperator.Greater);
operatorFormat.setOperand1(500);
operatorFormat.cellFormat.font.colorInfo = new WorkbookColorInfo(blue);

let rankFormat = sheet.conditionalFormats().addRankCondition("M1:M10", FormatConditionTopBottom.Top, 5);
rankFormat.cellFormat.font.colorInfo = new WorkbookColorInfo(green);

let textFormat = sheet.conditionalFormats().addTextCondition("N1:N10", "A", FormatConditionTextOperator.Contains);
textFormat.cellFormat.font.colorInfo = new WorkbookColorInfo(red);

let uniqueFormat = sheet.conditionalFormats().addUniqueCondition("O1:O10");
uniqueFormat.cellFormat.font.colorInfo = new WorkbookColorInfo(blue);

    API References