React + localeText 設定済の MUI DataGrid にて、フィルタ用 Custom Operator の value を標準の Operator と同じ値にすると、自動で翻訳される

以前、MUI DataGrid の列の filterOperators に自作の Custom Operator を設定して、独自のフィルタ機能を実装したことがありました。
React + MUI のDataGridにて、ある列が複数の日付を持つデータに対し、valueFormatter・sortComparator・filterModelを使って表示・ソート・フィルタしてみた - メモ的な思考的な

 
その時のフィルタには label の値が表示されていました。

ただ、MUI の DataGrid には Localization 機能があることから、自作の Custom Operator も Localization 対応したいと考えました。
Data Grid - Localization - MUI

また、自作の Custom Operator は標準の Operator とほとんど同じ機能であることから、できればフィルタに表示する時のラベルも標準と同じにしたいと考えました。

 
そこで、試しに実装してみたところ動作したため、メモを残します。

なお、公式ドキュメントに記載が見当たらなかったため、今回試した方法が将来は無効になるかもしれません。

 
目次

 

環境

  • React.js 17.0.2
  • React Router 6.0.1
  • @mui/x-data-grid 5.1.0

 
2021/12/02頃に x-data-grid の 5.1.0 系がリリースされたため、更新しておきます。
@mui/x-data-grid - npm

% yarn upgrade @mui/x-data-grid

 

DataGrid の Localization

まずは DataGrid に対し、公式ドキュメントに従って Localization を行います (今回は日本語化)。 Data Grid - Localization - MUI

 
手順としては以下のとおりです。

 
なお、注意点としては DataGrid の localeText に設定する際、公式ドキュメントの通りにやると「 props が無い」旨のエラーが出てしまいました。

そこで、手元では以下のようにすると動作しました。

// エラーが出る公式ドキュメントの書き方
<DataGrid localeText={nlNL.props.MuiDataGrid.localeText} />

// 手元で動作した書き方
<DataGrid localeText={jaJP.components.MuiDataGrid.defaultProps.localeText} />

 

Custom Operator の label について

公式ドキュメントでは labelFrom と設定した Custom Operator を使うことで、フィルタの選択肢に From が表示されています。
Create a custom operator - Data Grid - Filtering - MUI

今回はこの label 部分を日本語化してみます。

 

公式ドキュメントの Custom Operator に記載はありませんでしたが、

export const isOperator = {
  value: 'is',
  getApplyFilterFn: (filterItem: GridFilterItem) => {
    // ...
}

のように、

  • label は設定しない
  • value は標準の Operator の値と一致させる

としたところ、 locale に従って自動的に翻訳されました。

 

一方、

export const isBlankOperator = {
  value: 'isBlank',
  getApplyFilterFn: (filterItem: GridFilterItem) => {
  // ...
}

のように、

  • label が無い
  • value の値が標準の Operator に存在しない

場合は

Uncaught Error: Missing translation for key filterOperatorIsBlank.

というエラーになりました。

 
また、

export const isBlankOperator = {
  label: 'blank',
  value: 'isBlank',
  getApplyFilterFn: (filterItem: GridFilterItem) => {
    // ...
}

のように、 label を用意すると、 label の値がフィルタに表示されました。

 

標準 Operator のありかについて

標準 Operator の value の値を確認するには、Githubにあるファイルを見ます。

今のところ、このディレクトリになります。
https://github.com/mui-org/material-ui-x/tree/master/packages/grid/_modules_/grid/models/colDef

  • gridStringOperators.ts
  • gridDateOperators.ts

などがあるため、参照して実装すれば良さそうです。

 

ソースコード

Githubに上げました。
https://github.com/thinkAmi-sandbox/react_mui_with_vite-sample

 
今回のプルリクはこちらです。
https://github.com/thinkAmi-sandbox/react_mui_with_vite-sample/pull/6