IgrGrid – フィルターの表示を日本語にローカライズする

方法

IgrGrid には備え付けのフィルター機能がありますが、そのフィルター機能の表示は、デフォルトでは英語表記となっています (下図は IgrGrid の filterMode パラメーターに ExcelStyleFilter を指定したときの様子)。

このフィルター機能の表示を日本語化するには以下のようにします。

例として ”ja-JP.ts” ファイルに下記のような日本語でローカライズするために使用するリソース文字列を “JPResourceStrings” として準備します。
すべてのプロパティに日本語訳を設定済みの実装例は、こちらから入手できます。下記はその抜粋です。

export const JPResourceStrings = {
  igx_grid_groupByArea_message:"列ヘッダーをここへドラッグして列をグループ化します。",
  igx_grid_emptyFilteredGrid_message: "レコードは見つかりませんでした。",
  igx_grid_emptyGrid_message: "グリッドにデータがありません。",
  igx_grid_filter: "フィルター",
  igx_grid_filter_row_close: "閉じる",
  ....

次に、“JPResourceStrings” をインポートし、IgrGrid の resourceStringsパラメーターに設定します。

import { JPResourceStrings } from "./ja-JP";
....
<IgrGrid
   resourceStrings={JPResourceStrings}
   ....

以上で、IgrGrid のフィルター機能に関する各種表示項目が日本語化されます (下図例)。