IgcGrid を使用してグリッドを作成する際、セル内のテキストを右寄せにする方法を紹介します。(下図は dataType=”String” を指定したときの様子)。
方法
セルのテキストを右寄せするには、cellStylesまたはcellClassesを活用して CSS を適用します。
以下の例では、Name 列をcellStylesを使用して右寄せし、Country 列をcellClassesを用いて右寄せしています。
以下のコードでは、各列 (<igc-column>) に id を指定しています。この id を利用して、TypeScript から document.querySelector を使用し、各列の cellStylesやcellClassesを適用できます。
<igc-grid id="grid1">
<igc-column
id="col1"
field="name"
header="Name"
data-type="string">
</igc-column>
<igc-column
id="col2"
field="country"
header="Country"
data-type="string">
</igc-column>
<igc-column
.... >
</igc-column>
</igc-grid>
cellStyles を使用して右寄せする方法
cellStylesを使用して直接 justifyContent: “flex-end” を適用し、セル内のテキストを右寄せします。
const col1 = document.querySelector("#col1") as IgcColumnComponent;
col1.cellStyles = { justifyContent: "flex-end" };
cellClasses を使用して右寄せする方法
cellClassesを使用し sampleClass というクラスを作成します。
const col2 = document.querySelector("#col2") as IgcColumnComponent;
col2.cellClasses = { sampleClass: true };
.sampleClass に justify-content: flex-end; を適用します。
.sampleClass {
justify-content: flex-end;
}
実行結果
この設定により、Name 列と Country 列のテキストが右寄せされます (下図例)。
ダウンロード後、以下のコマンドで実行できます。
npm ci npm run dev
