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

  • 公開日:
  • 最終更新日:

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

IgrGrid の設定

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

<IgrColumn 
    field="heightCm" 
    header="身長（cm）" 
    formatter={formatHeightInCm} 
    dataType="number"    
  />
  <IgrColumn 
    field="heightMm" 
    header="身長（mm）" 
    formatter={formatHeightInMm} 
    dataType="number" 
  />

formatter の使用

ここでは、身長の数値データに単位を追加する処理を行います。

  • formatHeightInCm 関数では、value にそのまま “cm” を付加しています
  • formatHeightInMm 関数では、value を 10 倍して “mm” を付加しています
const formatHeightInCm = (value: number, rowData: any) => {
  return `${value} cm`;
};
const formatHeightInMm = (value: number, rowData: any) => {
  return `${value * 10} mm`;
};

実行結果

この設定を適用すると、IgrGrid の 身長列の表示が以下のようになります。

サンプルプログラムのダウンロード GitHub リポジトリはこちら

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

npm ci
npm run dev

関連ドキュメント

Tagged: