MUIのDataGridで標準の日本語と任意の文字列をマージさせる方法（備忘録）

はじめに

MUIのx-data-gridは、多機能なデータテーブルのコンポーネントです。
フィルター等機能も簡単につけられます。
しかし、標準で英語になっているため日本語に変更する方法と、
一部任意の文字列に変更したい場合の手順を記します。

環境

実装

①標準の日本語に変更する方法

rowやcolumnsは省略しています。
標準で日本語にローカライズできるのはありがたいです。

@mui/x-data-gridから、jaJPをインポートします。

//table.tsx
import { DataGrid, GridColDef, GridValueGetterParams,jaJP } from '@mui/x-data-grid';
//row,columnsの定義は省略
const Table = () => {
 return (
  <>
   <DataGrid
     rows={rows}
     columns={columns}
     localeText={jaJP.components.MuiDataGrid.defaultProps.localeText}
    /> 
  </>
 );
}

②任意の文字列に変更する方法

customTextなどオブジェクトを用意して、各文字列のプロパティに定義してあげれば、表示を変更できます。

//table.tsx
import { DataGrid, GridColDef, GridValueGetterParams} from '@mui/x-data-grid';
//row,columnsの定義は省略
const customText = {
  columnMenuSortAsc:"昇順にする"
}
const Table = () => {
 return (
  <>
   <DataGrid
     rows={rows}
     columns={columns}
     localeText={customText}
    /> 
  </>
 );
}

各項目のプロパティ名は、
node_module/@mui/x-data-grid/model/api/gridLocaleTextApi.d.ts > GridLocaleText  から確認できます。

export interface GridLocaleText {
    noRowsLabel: string;
    noResultsOverlayLabel: string;
    toolbarDensity: React.ReactNode;
    ....

③日本語に変更した上で、特定の文字列のみ変更する方法

標準で日本語にローカライズした後に
特定の項目だけ任意の文字列にする方法です。

//table.tsx
import { DataGrid, GridColDef, GridValueGetterParams,jaJP } from '@mui/x-data-grid';
//row,columnsの定義は省略
const customText = { 
　　　columnMenuSortAsc:"昇順にする" 
}
const mergeText = {
  ...jaJP.components.MuiDataGrid.defaultProps.localeText,
  ...customText
}
const Table = () => {
 return (
  <>
   <DataGrid
     rows={rows}
     columns={columns}
     localeText={mergeText}
    /> 
  </>
 );
}

特定文字列を変更したい場合は、このような手順で変更することができます。

参考

MUIのDataGridを日本語にローカライズしてみた