IgcGrid においてデータのフォーマットをカスタマイズする方法についてご紹介します。本記事では、formatterを使用して、数値データに単位を付加する方法を解説します。
IgcGrid の設定
IgcGrid のformatterを利用すると、特定の列に対してカスタムフォーマットを適用できます。
以下の例では、身長列の値を「cm」と「mm」の異なる単位で表示するように設定しています。
<igc-grid id="grid1">
<igc-column
id="heightCm"
field="heightCm"
header="身長（cm）"
data-type="number">
</igc-column>
<igc-column
id="heightMm"
field="heightMm"
header="身長（mm）"
data-type="number">
</igc-column>
</igc-grid>
上記のコードでは、heightCm と heightMm の列に id を設定しています。これにより、TypeScript で document.getElementById を使用してこれらの列を取得します。
formatter の使用
formatterプロパティを使用して、列のセル値にカスタムフォーマットを適用します。以下の例では、身長データに単位を追加する処理を行っています。
- formatHeightInCm 関数では、value にそのまま “cm” を付加しています
- formatHeightInMm 関数では、value を 10 倍して “mm” を付加しています
const heightCmColumn = document.getElementById("heightCm") as IgcColumnComponent;
heightCmColumn.formatter = (value: number) => {
return `${value} cm`;
};
const heightMmColumn = document.getElementById("heightMm") as IgcColumnComponent;
heightMmColumn.formatter = (value: number) => {
return `${value * 10} mm`;
};
実行結果
この設定を適用すると、IgcGrid の 身長列の表示が以下のようになります。
ダウンロード後、以下のコマンドで実行できます。
npm ci npm run dev
