React Spreadsheet の条件付き書式設定
React Spreadsheet コンポーネントは、ワークシートのセルに条件付き書式を設定できます。これにより、条件に基づいてデータのさまざまな部分をハイライト表示できます。
React Spreadsheet の条件付き書式設定の例
条件付き書式設定の概要
特定のワークシートの条件付き書式を構成するには、ワークシートの ConditionalFormats コレクションに公開される Add メソッドを使用できます。この Add メソッドの最初のパラメーターは条件付き書式に適用するワークシートの string 領域です。
ワークシートに追加できる条件付き書式の多くには、その条件付き書式の条件が満たされたときにセルを表示する方法を決定する CellFormat プロパティがあります。たとえば、Fill および Font などのこの CellFormat プロパティにアタッチされるプロパティを使用してセルの背景およびフォント設定を決定できます。
条件付き書式が作成され、CellFormat が適用される場合、ワークシートのセルにサポートされるプロパティのサブセットがあります。現在サポートされる CellFormat プロパティは Fill、Border プロパティ、FormatString、および strikethrough、underline、italic、bold、color などの Font プロパティです。以下のコード スニペットに複数のプロパティが設定されます。
ワーク セルの可視化の動作が異なるため、CellFormat プロパティがない条件付き書式もあります。この条件付き書式は DataBarConditionalFormat、ColorScaleConditionalFormat、IconSetConditionalFormat です。
既存の Workbook を 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:AddRankConditionメソッドを使用して追加されたこの条件付き書式は、セルのテキスト値がAddTextConditionメソッドのパラメーターの文字列およびFormatConditionTextOperator値にで定義された基準を満たすかどうかに基づいてワークシート セルのビジュアル属性を制御するプロパティを公開します。UniqueConditionalFormat:AddUniqueConditionメソッドを使用して追加されたこの条件付き書式は、セルの値が関連付けられた範囲全体で一意であるかどうかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。
依存関係
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';