Open2023/10/11にコメント追加2

MUI X DataGridのカスタマイズ

operatorのカスタマイズ

前提の話

DataGridはデフォルトでフィルタリング用のoperatorを複数提供してくれている。

columnがstring値なら文字列用の、number値なら数値用のoperatorがそれぞれ存在する。
例えばstring値ならcontains、equals、startsWith、endsWith、isEmpty、isNotEmpty、isAnyOfが提供されていて、文字列の完全一致や部分一致、空かどうかなど様々な条件でフィルタリングできるようになっている。

しかしアプリケーションの仕様によっては、必ずしもすべてのoperatorが必要なわけではない。
例えばcontains、equals以外が不要だとすれば、UI上の選択肢からも排除すべきである。

本題

要するに、デフォルトで提供されるフィルタリング用のoperatorから必要なoperatorのみを使いたい。

MUI XではgetGridStringOperatorsやgetGridNumericOperators という形でデフォルトのoperator情報を提供してくれているので、この中から必要なoperatorのみを使えばよさそう。

以下、string値の例

import { getGridStringOperators } from '@mui/x-data-grid';

type DataGridOperator =
  | 'contains'
  | 'equals'
  | 'startsWith'
  | 'endsWith'
  | 'isEmpty'
  | 'isNotEmpty'
  | 'isAnyOf';

export const getDataGridStringOperators = (values: DataGridOperator[]) => {
  return getGridStringOperators().filter((operator) =>
    values.includes(operator.value as DataGridOperator)
  );
};

getDataGridStringOperators(['contains', 'equals'])

ito

各種メニューのi18n対応

カラムヘッダーと0件表示

<MuiDataGrid
  localeText={{
    noRowsLabel: '該当するデータが存在しません',
    columnMenuLabel: 'メニュー',
    columnHeaderFiltersTooltipActive: (count) => `${count}件の有効な絞り込み`,
    columnHeaderSortIconLabel: '並び替え',
  }}
/>

カラムヘッダー内のアイコンボタンをhoverしたときに表示されるTooltip

カラムメニュー

<MuiDataGrid
  localeText={{
    columnMenuManageColumns: 'カラム管理',
    columnMenuFilter: '絞り込み',
    columnMenuHideColumn: 'カラムを非表示',
    columnMenuUnsort: '並び替えを解除',
    columnMenuSortAsc: '昇順に並び替え',
    columnMenuSortDesc: '降順に並び替え',
  }}
/>

カラムヘッダー内のメニューアイコンをクリックしたときに表示されるメニュー

カラムパネル

<MuiDataGrid
  localeText={{
    columnsPanelTextFieldLabel: 'カラムを検索',
    columnsPanelTextFieldPlaceholder: 'カラム名',
    columnsPanelShowAllButton: '全て表示',
    columnsPanelHideAllButton: '全て非表示',
  }}
/>

カラムメニュー＞カラム管理をクリックしたときに表示されるメニュー

フィルターパネル

<MuiDataGrid
  localeText={{
    filterPanelDeleteIconLabel: '削除',
    filterPanelOperator: '演算子',
    filterPanelColumns: 'カラム',
    filterPanelInputLabel: '値',
    filterPanelInputPlaceholder: '絞り込む値',
    filterOperatorContains: '部分一致',
    filterOperatorEquals: '完全一致',
  }}
/>

カラムメニュー＞絞り込みをクリックしたときに表示されるメニュー