IgbGrid – ヘッダーのテキストを中央配置にしたい

IgbGrid のヘッダーテキストを中央揃えにするには、IgbColumn の HeaderClasses プロパティにカスタム CSS クラスを指定し、そのクラスで text-align: center を設定します。あわせてアイコン領域の配置・余白・数値列のレイアウトも CSS で調整することで、すべての列ヘッダーの見た目を統一できます。

IgbGrid の設定

各 IgbColumn の HeaderClasses プロパティに、中央配置用のカスタムクラス名（ここでは header-center）を指定します。

<IgbGrid Data="data" AutoGenerate="false" ...>
    <IgbColumn Field="@nameof(RowData.Id)"      Header="Id"             HeaderClasses="header-center" ...></IgbColumn>
    <IgbColumn Field="@nameof(RowData.TestName)" Header="My Test Name"   HeaderClasses="header-center" ...></IgbColumn>
    <IgbColumn Field="@nameof(RowData.TestNum)"  Header="My Test Number" HeaderClasses="header-center" DataType="GridColumnDataType.Number" ...></IgbColumn>
</IgbGrid>

HeaderClasses とカスタム CSS の使用

HeaderClasses に指定したクラス名は、ヘッダーセルのルート要素に付与されます。Blazor のコンポーネントスコープ CSS（.razor.css）からシャドウ DOM 内部へ適用するために ::deep 擬似要素を使用します。

ヘッダーテキストの中央配置は .header-center クラスの text-align: center で実現します。テキストが中央に寄ることでアイコン（ソート・フィルター）がテキストと重なって見えるため、アイコン領域を position: absolute で右端に固定し、ヘッダーの左右パディングを詰めて余白を整えます。また、数値列は既定でアイコンが左側に配置されるため、.igx-grid-th--number セレクターでアイコンの順序をテキスト列と統一します。

/* ヘッダーテキストを中央配置 */
::deep .header-center {
    text-align: center;
}

/* ヘッダーの左右のパディングを小さくする */
::deep igx-grid-header {
    padding-inline-start: 2px;
    padding-inline-end: 2px;
}

/* アイコン領域を右に absolute 配置 */
::deep .igx-grid-th__icons {
    position: absolute;
    right: 2px;
    top: 1px;
    background: rgb(248, 249, 250);
    height: calc(var(--header-size) - 2px);
}

/* 数値列の配置をテキスト列と揃える */
::deep .igx-grid-th--number {
    .igx-grid-th__icons {
        justify-content: flex-end;
        order: 0;

        .sort-icon {
            order: 0;
        }
    }
}

実行結果

上記の設定を適用すると、すべての列ヘッダーのテキストが中央揃えになり、ソートアイコンとフィルターアイコンがヘッダー右端に整列します。数値列も同様のレイアウトになり、列全体で統一感のある表示になります。