React Grid の条件付きセルのスタイル設定
React Grid の Ignite UI for React コンポーネントを使用すると、行またはセル レベルでカスタム スタイルを設定できます。IgrGrid
条件付きセルのスタイル設定機能は、特定の基準を満たすデータを視覚的に強調またはハイライト表示するために使用され、ユーザーがグリッド内の重要な情報や傾向を簡単に識別できるようにします。
Grid 条件付き行のスタイル設定
Ignite UI for React の IgrGrid
コンポーネントは、カスタム ルールに基づいて行の条件付きスタイル設定を作成する次の 2 つの方法を提供します:
IgrGrid
コンポーネントでrowClasses
入力を設定する方法。IgrGrid
コンポーネントでrowStyles
入力を設定する方法。
さらにこのトピックでは、両方について詳しく説明します。
RowClasses の使用
IgrGrid
行の条件付きスタイル設定は、rowClasses
入力を設定してカスタム条件を定義するころによりスタイル設定できます。
<IgrGrid id="grid" height="600px" width="100%" rowClasses={rowClasses}>
</IgrGrid>
rowClasses
入力は、キーと値のペアを含むオブジェクト リテラルを受け取ります。キーは CSS クラスの名前です。値はブール値を返すコールバック関数またはブール値です。
const rowClasses = {
activeRow: (row: IgrRowType) => row.index === 0
}
.activeRow {
border: 2px solid #fc81b8;
border-left: 3px solid #e41c77;
}
デモ
RowStyles の使用
IgrGrid
コントロールは、データ行の条件付きスタイル設定を可能にする rowStyles
プロパティを公開します。rowClasses
と同様、キーがスタイル プロパティであり、値が評価用の式であるオブジェクト リテラルを受け取ります。また、通常のスタイル設定 (条件なし) を適用することもできます。
rowStyles
とrowClasses
の両方のコールバック署名は以下のとおりです。
(row: IgrRowType) => boolean
次にスタイルを定義します。
const rowStyles = {
'background': (row: IgrRowType) => (+row.data['Change'] < 0 && +row.data['AnnualChange'] < 0) ? '#FF000088' : '#00000000',
'border': (row: IgrRowType) => (+row.data['Change'] < 0 && +row.data['AnnualChange'] < 0) ? '2px solid' : '1px solid',
'border-color': (row: IgrRowType) => (+row.data['Change'] < 0 && +row.data['AnnualChange'] < 0) ? '#FF000099' : '#E9E9E9'
};
<IgrGrid id="grid" height="600px" width="100%" rowStyles={rowStyles}>
<IgrGrid>
デモ
Grid 条件付きセルのスタイル設定
概要
Ignite UI for React の IgrGrid
コンポーネントは、カスタム ルールに基づいてセルの条件付きスタイル設定を作成する次の 2 つの方法を提供します:
IgrColumn
入力cellClasses
をキーと値のペアを含むオブジェクト リテラルに設定します。キーは CSS クラスの名前です。値はブール値を返すコールバック関数またはブール値です。その結果、セルのマテリアル スタイル設定が簡単にできます。
CellClasses の使用
IgrColumn
cellClasses
入力を設定してカスタム条件を定義することにより、IgrGrid
の条件付きセルのスタイルを設定できます。
<IgrColumn field="BeatsPerMinute" dataType="Number" cellClasses={beatsPerMinuteClasses}></IgrColumn>
cellClasses
入力は、キーと値のペアを含むオブジェクト リテラルを受け取ります。キーは CSS クラスの名前です。値はブール値を返すコールバック関数またはブール値です。
function upFontCondition(rowData: any, columnKey: any): boolean {
return rowData[columnKey] > 95;
}
function downFontCondition(rowData: any, columnKey: any): boolean {
return rowData[columnKey] <= 95;
}
const beatsPerMinuteClasses = {
downFont: downFontCondition,
upFont: upFontCondition
};
.upFont {
color: green !important;
}
.downFont {
color: red !important;
}
デモ
IgrColumn
入力を使用して、キーがスタイル プロパティであり、値が評価用の式であるオブジェクト リテラルを受け取るcellStyles
。
cellStyles
とcellClasses
の両方のコールバック シグネチャが次のように変更されました。
(rowData: any, columnKey: string, cellValue: any, rowIndex: number) => boolean
CellStyles の使用
列の cellStyles
プロパティを公開。列セルの条件付きスタイリングが可能になりました。cellClasses
と同様、キーがスタイル プロパティであり、値が評価用の式であるオブジェクト リテラルを受け取ります。また、通常のスタイリングを簡単に適用できます (条件なし)。
次にスタイルを定義します。
const webGridCellStyles = {
background: (rowData, columnKey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "#EFF4FD" : null,
color: (rowData, columnKey, cellValue, rowIndex) => {
if (columnKey === "Position") {
switch (cellValue) {
case "up": return "#28a745";
case "down": return "#dc3545";
case "current": return "#17a2b8"
}
}
}
}
<IgrColumn cellStyles={webGridCellStyles}></IgrColumn>
デモ
既知の問題と制限
- 他の列に同じ条件でバインドされたセルがある場合に、そのうち 1 つのセルが更新された際に条件が満たされている場合も、他のセルが新しい値に基づいて更新されない問題。
let backgroundClasses = {
myBackground: (rowData: any, columnKey: string) => {
return rowData.Col2 < 10;
}
};
function editDone(grid, evt) {
backgroundClasses = {...backgroundClasses};
}
<IgrGrid id="grid1" height="500px" width="100%" onCellEdit={editDone}>
<IgrColumn id="Col1" field="Col1" dataType="number" cellClasses={backgroundClasses}></IgrColumn>
<IgrColumn id="Col2" field="Col2" dataType="number" editable="true" cellClasses={backgroundClasses}></IgrColumn>
<IgrColumn id="Col3" field="Col3" header="Col3" dataType="string" cellClasses={backgroundClasses}></IgrColumn>
</IgrGrid>
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。