IgbGrid – ヘッダー文字列の寄せ方向を指定する

IgbGrid を使用して表を作成する際、ヘッダーの文字列を特定の方向に寄せる方法があります。
これには、左寄せ、中央寄せ、右寄せなどがありますが、今回は左寄せと中央寄せの方法を紹介します。

方法

まず、ヘッダーの各列に対して、それぞれの寄せ方向を指定するために HeaderClasses プロパティを使用します。
例として、左寄せを適用する「年齢」列に header-left 中央寄せを適用する「スキル」列に header-center を指定します。

<IgbColumn ....
           Header="年齢"
           HeaderClasses="header-left"
           ..../>

<IgbColumn ....
           Header="スキル"
           HeaderClasses="header-center"
           ..../>

次に、これらの指定したクラスに対して、実際にどのように寄せるかを示す CSS を記述します。
以下のように、.header-left クラスに対しては text-align: left;、.header-center クラスに対しては text-align: center; を適用します。

::deep .header-left {
    text-align: left;
}

::deep .header-center {
    text-align: center;
}

実行結果

これにより、特定の列のヘッダーの文字列が左寄せや中央寄せされます。
例えば、「年齢」列には左寄せが適用され、「スキル」列には中央寄せが適用されます。