Introduction
The x-data-grid in MUI is a highly functional data table component.
It allows easy implementation of features like filtering.
However, it's in English by default.
Here’s how to localize it into Japanese and override specific labels with custom strings.
Environment
- react: 17.0.2
- typescript: 4.9.5
- mui/x-data-grid: 6.19.4
Implementation
① Localize to Japanese
rows and columns definitions are omitted.
Fortunately, MUI provides built-in Japanese localization.
Import jaJP from @mui/x-data-grid.
// table.tsx
import { DataGrid, GridColDef, GridValueGetterParams, jaJP } from '@mui/x-data-grid';
// row, columns definitions omitted
const Table = () => {
return (
<>
<DataGrid
rows={rows}
columns={columns}
localeText={jaJP.components.MuiDataGrid.defaultProps.localeText}
/>
</>
);
};② Override with Custom Strings
You can create an object like customText and override only specific strings.
// table.tsx
import { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid';
// row, columns definitions omitted
const customText = {
columnMenuSortAsc: "Sort Ascending"
}
const Table = () => {
return (
<>
<DataGrid
rows={rows}
columns={columns}
localeText={customText}
/>
</>
);
};
The property names can be found in:
node_modules/@mui/x-data-grid/models/api/gridLocaleTextApi.d.ts > GridLocaleText
export interface GridLocaleText {
noRowsLabel: string;
noResultsOverlayLabel: string;
toolbarDensity: React.ReactNode;
...
}③ Merge Japanese with Custom Strings
You can localize to Japanese and still override specific items.
// table.tsx
import { DataGrid, GridColDef, GridValueGetterParams, jaJP } from '@mui/x-data-grid';
// row, columns definitions omitted
const customText = {
columnMenuSortAsc: "Sort Ascending"
};
const mergeText = {
...jaJP.components.MuiDataGrid.defaultProps.localeText,
...customText
};
const Table = () => {
return (
<>
<DataGrid
rows={rows}
columns={columns}
localeText={mergeText}
/>
</>
);
};
If you want to override specific strings, use this approach.