以前、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
手順としては以下のとおりです。
import { jaJP } from '@mui/x-data-grid'
する- サポートされている locale は以下に記載あり
- DataGrid の
localeText
に設定する
なお、注意点としては DataGrid の localeText
に設定する際、公式ドキュメントの通りにやると「 props
が無い」旨のエラーが出てしまいました。
そこで、手元では以下のようにすると動作しました。
// エラーが出る公式ドキュメントの書き方 <DataGrid localeText={nlNL.props.MuiDataGrid.localeText} /> // 手元で動作した書き方 <DataGrid localeText={jaJP.components.MuiDataGrid.defaultProps.localeText} />
Custom Operator の label について
公式ドキュメントでは label
に From
と設定した 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