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

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

IgbGrid の設定

IgbGrid のFormatterScriptを利用すると、各セルの表示形式を JavaScript でカスタマイズできます。
以下の例では、身長列の値を「cm」と「mm」の異なる単位で表示するように設定しています。

<IgbColumn Field="@nameof(Person.Height)"
           Header="身長（単位：cm）"
           DataType="GridColumnDataType.Number"
           FormatterScript="HeightFormatter1">
</IgbColumn>
<IgbColumn Field="@nameof(Person.Height)"
           Header="身長（単位：mm）"
           DataType="GridColumnDataType.Number"
           FormatterScript="HeightFormatter2">
</IgbColumn>

FormatterScript の使用

FormatterScriptに指定するスクリプトは、igRegisterScript を使用して定義します。

igRegisterScript("HeightFormatter1", (value) => {  
    return `${value} cm`; // 末尾に「cm」を付加します
}, false);

igRegisterScript("HeightFormatter2", (value) => {
    return `${value * 10} mm`; // 値を 10 倍して末尾に「mm」を付加します   
}, false);

実行結果

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

関連ドキュメント

• Blazor Grid 列のデータ タイプ – Ignite UI for Blazor