IgrGrid セルの値に応じて行全体の色を変える

  • 公開日:
  • 最終更新日:

IgrGrid でセルの値に応じて行全体の色を変更する方法を紹介します。　
本記事では、在庫数に応じて行の色を変える実装を行います。

IgrGrid の設定

IgrGrid のrowClassesに TypeScript のハンドラーを指定し、特定の条件を満たす行に CSS クラスを適用します。

<IgrGrid
        data={sampleData}
        primaryKey="id"
        width="100%"
        height="300px"
        style={{ "--ig-size": "var(--ig-size-small)" }}
        rowSelection="single"
        rowClasses={webGridRowClassesHandler}
      >
        ....
      </IgrGrid>

ハンドラーの作成

このハンドラーは、キーが CSS クラス名、値がその CSS クラスを適用する条件（true / false）を返すオブジェクトです。

const webGridRowClassesHandler = {
  "high-stock": (row: any) => row.data["stock"] >= 50,
  "low-stock": (row: any) => row.data["stock"] < 10,
};

CSS クラスの定義

適用する CSS クラスのスタイルを定義します。

.high-stock {
  background-color: lightgreen !important; /* 緑系（在庫多い） */
}

.low-stock {
  background-color: lightpink !important; /* ピンク系（在庫少ない） */
}

これで、在庫が 50 以上 の行は 緑色、10 未満 の行は ピンク色 で表示されるようになります。

行選択やマウスホバー時のスタイル適用

行の状態に応じたスタイルを追加したい場合は、以下のセレクターを使用します。

  • マウスホバーしている行 – igx-grid-row:hover
  • 行選択されている行 – igx-grid-row[aria-selected=”true”]
  • 行選択されていて、かつマウスホバーしている行 – igx-grid-row[aria-selected=”true”]:hover

以下の例では、在庫が少ない (low-stock) 場合と多い (high-stock) 場合で、それぞれのスタイルを適用します。

/* マウスホバーしている場合のスタイル定義 */
igx-grid-row.low-stock:hover {
  background-color: hotpink !important;
}

igx-grid-row.high-stock:hover {
  background-color: limegreen !important;
}

/* 行選択されている場合のスタイル定義 */
igx-grid-row.low-stock[aria-selected="true"] {
  background-color: hotpink !important;
}

igx-grid-row[aria-selected="true"].high-stock {
  background-color: limegreen !important;
}

/* 行選択されていて、かつ、マウスホバーしている場合のスタイル定義 */
igx-grid-row[aria-selected="true"].low-stock:hover {
  background-color: deeppink !important;
}

igx-grid-row[aria-selected="true"].high-stock:hover {
  background-color: mediumseagreen !important;
}

実行結果

サンプルプログラムのダウンロード GitHub リポジトリはこちら

ダウンロード後、以下のコマンドで実行できます。

npm ci
npm run dev

関連ドキュメント

Tagged: