IgxGrid – セルのフォーマットを変更したい

IgxGrid においてデータのフォーマットをカスタマイズする方法についてご紹介します。本記事では、formatterを使用して、数値データに単位を付加する方法を解説します。

IgxGrid の設定

IgxGrid のformatterプロパティを利用すると、特定の列に対してカスタムフォーマットを適用できます。以下の例では、身長データを「cm」と「mm」の異なる単位で表示するように設定しています。

<igx-column
  field="heightCm"
  header="身長（cm）"
  [formatter]="formatHeightInCm"
  dataType="number"
  width="auto">
</igx-column>
<igx-column
  field="heightMm"
  header="身長（mm）"
  [formatter]="formatHeightInMm"
  dataType="number"
  width="auto">
</igx-column>

formatter の使用

ここでは、身長の数値データに単位を追加する処理を行います。
formatHeightInCm 関数では、value にそのまま “cm” を付加しています

formatHeightInCm = (value: any, rowData: any) => {
  return value + ' cm';
};

formatHeightInMm 関数では、value を 10 倍して “mm” を付加しています

formatHeightInMm = (value: any, rowData: any) => {
  return value * 10 + ' mm';
};

実行結果

この設定を適用すると、IgxGrid の身長列の表示が以下のようにカスタマイズされます。

ダウンロード後、以下のコマンドで実行できます。

npm ci
npm run dev

関連ドキュメント

• Angular の列データ型 – Ignite UI for Angular