React Hierarchical Grid の条件付きセルのスタイル設定

    React Hierarchical Grid の Ignite UI for React コンポーネントを使用すると、行またはセル レベルでカスタム スタイルを設定できます。IgrHierarchicalGrid 条件付きセルのスタイル設定機能は、特定の基準を満たすデータを視覚的に強調またはハイライト表示するために使用され、ユーザーがグリッド内の重要な情報や傾向を簡単に識別できるようにします。

    Hierarchical Grid 条件付き行のスタイル設定

    Ignite UI for React の IgrHierarchicalGrid コンポーネントは、カスタム ルールに基づいて行の条件付きスタイル設定を作成する次の 2 つの方法を提供します:

    さらにこのトピックでは、両方について詳しく説明します。

    RowClasses の使用

    IgrHierarchicalGrid 行の条件付きスタイル設定は、rowClasses 入力を設定してカスタム条件を定義するころによりスタイル設定できます。

    <IgrHierarchicalGrid id="grid" height="600px" width="100%" rowClasses={rowClasses}>
</IgrHierarchicalGrid>
tsx

    rowClasses 入力は、キーと値のペアを含むオブジェクト リテラルを受け取ります。キーは CSS クラスの名前です。値はブール値を返すコールバック関数またはブール値です。

    const rowClasses = {
    activeRow: (row: IgrRowType) => row.index === 0
}
tsx
    .activeRow {
    border: 2px solid #fc81b8;
    border-left: 3px solid #e41c77;
}
css

    デモ

    EXAMPLE
    TSX
    CSS
    Edit in:

    このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

    RowStyles の使用

    IgrHierarchicalGrid コントロールは、データ行の条件付きスタイル設定を可能にする rowStyles プロパティを公開します。rowClasses と同様、キーがスタイル プロパティであり、値が評価用の式であるオブジェクト リテラルを受け取ります。また、通常のスタイル設定 (条件なし) を適用することもできます。

    rowStyles と rowClasses の両方のコールバック署名は以下のとおりです。

    (row: IgrRowType) => boolean
tsx

    次にスタイルを定義します。

    public rowStyles = {
    background:(row: RowType) => row.data['HasGrammyAward'] ? '#eeddd3' : '#f0efeb',
    'border-left': (row: RowType) => row.data['HasGrammyAward'] ? '2px solid #dda15e' : null
};

public childRowStyles = {
    'border-left': (row: RowType) => row.data['BillboardReview'] > 70 ? '3.5px solid #dda15e' : null
};
typescript
    <IgrHierarchicalGrid autoGenerate="true" rowStyles={rowStyles}
        height="580px" width="100%">
        <IgrRowIsland childDataKey="Albums" autoGenerate="true" rowStyles={childRowStyles}>
        </IgrRowIsland>
</IgrHierarchicalGrid>
tsx

    デモ

    EXAMPLE
    TSX
    CSS
    Edit in:

    Hierarchical Grid 条件付きセルのスタイル設定

    Ignite UI for React | CTA Banner

    概要

    Ignite UI for React の IgrHierarchicalGrid コンポーネントは、カスタム ルールに基づいてセルの条件付きスタイル設定を作成する次の 2 つの方法を提供します:

    • IgrColumn 入力 cellClasses をキーと値のペアを含むオブジェクト リテラルに設定します。キーは CSS クラスの名前です。値はブール値を返すコールバック関数またはブール値です。その結果、セルのマテリアル スタイル設定が簡単にできます。

    CellClasses の使用

    IgrColumn cellClasses 入力を設定してカスタム条件を定義することにより、IgrHierarchicalGrid の条件付きセルのスタイルを設定できます。

    <IgrColumn field="BeatsPerMinute" dataType="Number" cellClasses={this.grammyNominationsCellClassesHandler}></IgrColumn>
tsx

    cellClasses 入力は、キーと値のペアを含むオブジェクト リテラルを受け取ります。キーは CSS クラスの名前です。値はブール値を返すコールバック関数またはブール値です。

    public grammyNominationsCellClassesHandler = {
    downFont: (rowData: any, columnKey: any): boolean => rowData[columnKey] < 5,
    upFont: (rowData: any, columnKey: any): boolean => rowData[columnKey] >= 6
};
tsx
    .upFont {
    color: green !important;
}

.downFont {
    color: red !important;
}
css

    デモ

    EXAMPLE
    TSX
    CSS
    Edit in:

    • IgrColumn 入力を使用して、キーがスタイル プロパティであり、値が評価用の式であるオブジェクト リテラルを受け取る cellStyles。

    cellStyles と cellClasses の両方のコールバック シグネチャが次のように変更されました。

    (rowData: any, columnKey: string, cellValue: any, rowIndex: number) => boolean
ts

    CellStyles の使用

    列の cellStyles プロパティを公開。列セルの条件付きスタイリングが可能になりました。cellClasses と同様、キーがスタイル プロパティであり、値が評価用の式であるオブジェクト リテラルを受け取ります。また、通常のスタイリングを簡単に適用できます (条件なし)。

    次にスタイルを定義します。

    const cellStylesHandler = {
    background: (rowData, columnKey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "#EFF4FD" : null,
    color: (rowData, columnKey, cellValue, rowIndex) => {
        if (columnKey === "Debut") {
            return cellValue > 2000 ? "#28a745" : "#dc3545";
        }
        return undefined;
    }
}
tsx
    <IgrColumn cellStyles={cellStylesHandler}></IgrColumn>
tsx

    デモ

    EXAMPLE
    TSX
    CSS
    Edit in:

    既知の問題と制限

    • 他の列に同じ条件でバインドされたセルがある場合に、そのうち 1 つのセルが更新された際に条件が満たされている場合も、他のセルが新しい値に基づいて更新されない問題。
    let backgroundClasses = {
    myBackground: (rowData: any, columnKey: string) => {
        return rowData.Col2 < 10;
    }
};

function editDone(grid, evt) {
    backgroundClasses = {...backgroundClasses};
}

<IgrHierarchicalGrid 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>
</IgrHierarchicalGrid>
tsx

    API リファレンス

    その他のリソース

    コミュニティに参加して新しいアイデアをご提案ください。