React 스프레드시트 조건부 서식

    React 스프레드시트 구성요소를 사용하면 워크시트 셀의 서식을 조건부로 지정할 수 있습니다. 이를 통해 조건에 따라 데이터의 다양한 부분을 강조표시할 수 있습니다.

    React Spreadsheet Conditional Formatting Example

    Conditional Formatting Overview

    다양한 기능을 사용하여 특정 워크시트의 조건부 서식을 구성할 수 있습니다. Add 메소드에 노출됨 conditionalFormats 해당 워크시트의 컬렉션입니다. 이들 중 첫 번째 매개변수는 Add 방법은 조건부 형식을 적용하려는 워크시트의 문자열 영역입니다.

    워크시트에 추가할 수 있는 대부분의 조건부 형식에는 해당 조건부 형식의 조건이 true일 때 셀이 표시되는 방식을 결정하는 cellFormat 속성이 있습니다. 예를 들어 fill 및 font과 같이 이 cellFormat 속성에 연결된 속성을 사용하여 각각 셀의 배경 및 글꼴 설정을 결정할 수 있습니다.

    조건부 형식이 생성되고 cellFormat 적용되면 현재 워크시트 셀에서 지원되는 속성의 하위 집합이 있습니다. 현재 cellFormat에서 적용되는 속성은 fill, Border 속성, formatString 및 취소선, 밑줄, 기울임꼴, 굵게 및 색상과 같은 일부 font 속성입니다. 이들 중 대부분은 아래 코드 조각에서 볼 수 있습니다.

    셀에 대한 시각화가 다르게 동작하므로 cellFormat 속성이 없는 몇 가지 조건부 형식이 있습니다. 이러한 조건부 형식은 DataBarConditionalFormat, ColorScaleConditionalFormat 및 IconSetConditionalFormat 입니다.

    Excel에서 기존 통합 문서를 로드하는 경우 해당 통합 문서가 로드될 때 형식이 유지됩니다. 통합 문서를 Excel 파일로 저장할 때도 마찬가지입니다.

    다음은 React IgrSpreadsheet 컨트롤에서 지원되는 조건부 형식을 나열합니다.

    • AverageConditionalFormat: addAverageCondition 메소드를 사용하여 추가된 이 조건부 형식은 셀 값이 관련 범위의 평균 또는 표준 편차보다 높거나 낮은지 여부에 따라 워크시트 셀의 시각적 특성을 제어하는 속성을 노출합니다.
    • BlanksConditionalFormat: addBlanksCondition 메서드를 사용하여 추가된 이 조건부 형식은 셀 값이 설정되지 않았는지 여부에 따라 워크시트 셀의 시각적 특성을 제어하는 속성을 노출합니다.
    • ColorScaleConditionalFormat: addColorScaleCondition 메서드를 사용하여 추가된 이 조건부 형식은 최소, 중간점 및 최대 임계값을 기준으로 셀 값을 기반으로 워크시트 셀의 색상을 제어하는 속성을 노출합니다.
    • DataBarConditionalFormat: addDataBarCondition 메서드를 사용하여 추가된 이 조건부 형식은 연결된 값 범위를 기준으로 셀 값을 기반으로 워크시트 셀에 데이터 막대를 표시하는 속성을 노출합니다.
    • DateTimeConditionalFormat: addDateTimeCondition 메소드를 사용하여 추가된 이 조건부 형식은 셀의 날짜 값이 지정된 시간 범위 내에 속하는지 여부에 따라 워크시트 셀의 시각적 특성을 제어하는 속성을 노출합니다.
    • DuplicateConditionalFormat: addDuplicateCondition 메서드를 사용하여 추가된 이 조건부 형식은 셀 값이 고유한지 또는 관련 범위 전체에서 중복되는지 여부에 따라 워크시트 셀의 시각적 특성을 제어하는 속성을 노출합니다.
    • ErrorsConditionalFormat: addErrorsCondition 메소드를 사용하여 추가된 이 조건부 형식은 셀 값이 유효한지 여부에 따라 워크시트 셀의 시각적 특성을 제어하는 속성을 노출합니다.
    • FormulaConditionalFormat: addFormulaCondition 메소드를 사용하여 추가된 이 조건부 형식은 셀 값이 수식에 정의된 기준을 충족하는지 여부에 따라 워크시트 셀의 시각적 특성을 제어하는 속성을 노출합니다.
    • IconSetConditionalFormat: addIconSetCondition 메소드를 사용하여 추가된 이 조건부 형식은 임계값에 상대적인 셀 값을 기반으로 워크시트 셀에 아이콘을 표시하는 속성을 노출합니다.
    • NoBlanksConditionalFormat: addNoBlanksCondition 메서드를 사용하여 추가된 이 조건부 형식은 셀 값 설정 여부에 따라 워크시트 셀의 시각적 특성을 제어하는 속성을 노출합니다.
    • NoErrorsConditionalFormat: addNoErrorsCondition 메서드를 사용하여 추가된 이 조건부 형식은 셀 값이 유효한지 여부에 따라 워크시트 셀의 시각적 특성을 제어하는 속성을 노출합니다.
    • OperatorConditionalFormat: addOperatorCondition 메소드를 사용하여 추가된 이 조건부 형식은 셀 값이 논리 연산자로 정의된 기준을 충족하는지 여부에 따라 워크시트 셀의 시각적 특성을 제어하는 속성을 노출합니다.
    • RankConditionalFormat: addRankCondition 메서드를 사용하여 추가된 이 조건부 형식은 셀 값이 연결된 범위 전체에서 값의 최하위 순위 내에 있는지 여부에 따라 워크시트 셀의 시각적 특성을 제어하는 속성을 노출합니다.
    • TextOperatorConditionalFormat: addTextCondition 메소드를 사용하여 추가된 이 조건부 형식은 셀의 텍스트 값이 addTextCondition 메소드의 매개변수에 배치된 FormatConditionTextOperator 값과 문자열로 정의된 기준을 충족하는지 여부에 따라 워크시트 셀의 시각적 속성을 제어하는 속성을 노출합니다.
    • UniqueConditionalFormat: addUniqueCondition 메서드를 사용하여 추가된 이 조건부 형식은 셀 값이 연결된 범위 전체에서 고유한지 여부에 따라 워크시트 셀의 시각적 특성을 제어하는 속성을 노출합니다.

    Dependencies

    ​IgrSpreadsheet 컨트롤에 조건부 서식을 추가하려면 다음 종속성을 가져와야 합니다.

    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

    다음 코드 조각은 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