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

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

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

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

IgrTreeGrid コンポーネントで rowClasses 入力を設定する方法。
IgrTreeGrid コンポーネントで rowStyles 入力を設定する方法。

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

RowClasses の使用

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

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

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

const rowClasses = {
    activeRow: (row: IgrRowType) => row.index === 0
}

.activeRow {
    border: 2px solid #fc81b8;
    border-left: 3px solid #e41c77;
}

デモ

RowStyles の使用

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

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

(row: IgrRowType) => boolean

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

const rowStyles = {
    'background': (row: IgrRowType) => row.data['Title'] === 'CEO' ? '#6c757d' :
        row.data['Title'].includes('President') ?'#adb5bd' :
        row.data['Title'].includes('Director') ? '#ced4da' :
        row.data['Title'].includes('Manager') ? '#dee2e6' :
        row.data['Title'].includes('Lead') ? '#e9ecef' :
        row.data['Title'].includes('Senior') ? '#f8f9fa' : null,
    'border-left': (row: IgrRowType) => row.data['Title'] === 'CEO' || row.data['Title'].includes('President') ? '2px solid' : null,
    'border-color': (row: IgrRowType) => row.data['Title'] === 'CEO' ? '#495057' : null,
    'color': (row: IgrRowType) => row.data['Title'] === 'CEO' ? '#fff' : null
};

<IgrTreeGrid autoGenerate="true" primaryKey="ID" foreignKey="ParentID" data={data} rowStyles={rowStyles}>
</IgrTreeGrid>

デモ

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

概要

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

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

CellClasses の使用

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

<IgrColumn field="UnitPrice" header="Unit Price" dataType="currency" cellClasses={unitPriceCellClasses}>
</IgrColumn>

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

function upPriceCondition(rowData: any, columnKey: any): boolean {
    return rowData[columnKey] > 5;
}

function downPriceCondition(rowData: any, columnKey: any): boolean {
    return rowData[columnKey] <= 5;
}

const unitPriceCellClasses = {
    downPrice: downPriceCondition,
    upPrice: upPriceCondition
};

.upPrice {
    color: red !important;
}

.downPrice {
    color: green !important;
}

デモ

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

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

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

CellStyles の使用

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

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

const webTreeGridCellStyles = {
    background: (rowData, columnKey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "#EFF4FD" : null,
    color: (rowData, columnKey, cellValue, rowIndex) => {
        if (columnKey === "UnitPrice") {
            if (cellValue > 10) return "#dc3545";
            if (cellValue < 5) return "#28a745";
            if (cellValue >= 5 && cellValue <= 10) return "#17a2b8";
        }
    }
}

<IgrColumn cellStyles={webTreeGridCellStyles}></IgrColumn>

デモ

既知の問題と制限

他の列に同じ条件でバインドされたセルがある場合に、そのうち 1 つのセルが更新された際に条件が満たされている場合も、他のセルが新しい値に基づいて更新されない問題。

let backgroundClasses = {
    myBackground: (rowData: any, columnKey: string) => {
        return rowData.Col2 < 10;
    }
};

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

<IgrTreeGrid 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>
</IgrTreeGrid>

API リファレンス

その他のリソース

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