IgxGrid セルに罫線を引く方法

Ignite UI for Angular 9.1.6 バージョン時点での情報に基づいています。

IgxGridのセルに罫線を引きたい場合は、CSSで各DOM要素にborderの設定をしてください。ここでは、IgxGridのデフォルトのテーマをカスタマイズする方法で説明します。

/* styles.scss */
@import '~igniteui-angular/lib/core/styles/themes/index';
@include igx-core();

/* 枠線用のCSS変数 */
$my-border-color: black;
$my-border: 1px solid $my-border-color;

/* カスタムテーマの作成 */
$custom-theme: igx-grid-theme(
    $header-border-color: $my-border-color,
    $row-border-color: $my-border-color
);

:host {
    ::ng-deep {
        /* カスタムテーマの読み込み */
        @include igx-grid($custom-theme);

        /* ヘッダー部 */
        .igx-grid__thead-wrapper {
            border-top: $my-border;
            border-left: $my-border;
            border-right: $my-border;
        }

        /* データ行部 */
        igx-grid-row.igx-grid__tr {
            border-left: $my-border;
            border-right: $my-border;
            border-bottom: $my-border;
        }

        /* データセル部 */
        .igx-grid__td {
            border-right: $my-border;
        }
    }
}

• 5～13行目
  • 「線幅1px、直線、黒」の枠線用のCSS変数を作成し、カスタムテーマを作成しています。
  • カスタムテーマの作成方法は、以下のヘルプを参考にしてください。
    • 「データグリッド」→ 「スタイルの構成」
    • 「データ ツリー グリッド」→「スタイル設定」
• 18行目
  • カスタムテーマを読み込んでいます。
• 20～37行目
  • igx-gridのデフォルトのテーマでは当たらない部分に対して、個別に枠線を設定しています。

　

実行結果

　

サンプル

　

リファレンス

• 「データグリッド」→「スタイルの構成」
  • https://jp.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid.html#%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%81%AE%E6%A7%8B%E6%88%90
• 「データ ツリー グリッド」→「スタイル設定」
  • https://jp.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/tree_grid.html#%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E8%A8%AD%E5%AE%9A
• 「コンポーネント テーマ」
  • https://jp.infragistics.com/products/ignite-ui-angular/angular/components/themes/component-themes.html