IgbGrid – ヘッダー行や選択行、奇数行と偶数行など、行の配色を指定する方法

Ignite UI for Blazor のグリッドコンポーネント IgbGrid にはビルトインで CSS カスタムプロパティが組み込まれています。それら CSS カスタムプロパティの値を上書きすることで、

• 奇数行と偶数行とで異なる背景色を指定してストライプ表示を実現したり、
• ヘッダーや選択行、マウスホバー行の配色を変更したり

といったカスタマイズをすることができます。

具体的な CSS カスタムプロパティの名前とその適用先については下記サンプルコードを参照ください。

/* App.razor.css */
::deep igc-grid {
    /* 
     * ヘッダーの背景 (...-background) とテキスト色 (...-text-color) */
    --header-background: #333;
    --header-text-color: #ccc;
    /* 
     * 奇数行の背景 (...-background) とテキスト色 (...-text-color) */
    --row-odd-background: whitesmoke;
    --row-odd-text-color: #666;
    /* 
     * 偶数行の背景 (...-background) とテキスト色 (...-text-color) */
    --row-even-background: gainsboro;
    --row-even-text-color: #555;
    /* 
     * マウスホバー行の背景 (...-background) とテキスト色 (...-text-color) */
    --row-hover-background: lightblue;
    --row-hover-text-color: steelblue;
    /* 
     * 選択行の背景 (...-background) とテキスト色 (...-text-color) */
    --row-selected-background: lightpink;
    --row-selected-text-color: deeppink;
    /* 
     * マウスホバー選択行の背景 (...-background) とテキスト色 (...-text-color) */
    --row-selected-hover-background: hotpink;
    --row-selected-hover-text-color: lightpink;
    /* 
     * 選択セルの背景 (...-background) とテキスト色 (...-text-color) 
     * (※ backgroud 指定なので、色に限らず、画像やストライプ効果なども指定できる)*/
    --cell-selected-within-background: repeating-linear-gradient(
        135deg,
        deeppink 0,
        deeppink 6px,
        hotpink 6px,
        hotpink 12px);
    --cell-selected-within-text-color: white;
}

    ::deep igc-grid igx-checkbox {
        /* 
         * IgbGrid 内のチェックボックスの背景色 */
        --fill-color: deeppink;
    }

実行結果

ヘルプドキュメント

• 「Blazor データ グリッドのテーマ」
  • https://jp.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/theming
  • 今回取り上げた CSS プロパティだけでなく、さまざまなビルトイン CSS カスタムプロパティが確認できます。参考にしてみてください。

関連情報

IgbGrid – グループヘッダー（複数列ヘッダー）の背景色を設定する方法 – INFRAGISTICS ナレッジベース

サンプル