MUIのDetaGridでのCSV出力を日本語対応にしてみる

2022年12月1日2023年1月19日

MUIのDetaGridは非常にスタイリッシュで便利。

こういった、CSVダウンロードメニューも簡単に組み込むことができる。

なのですが、このままだと日本語（たぶん2バイト文字）があると文字化けしてしまう。

が、さすがはMUI。簡単に日本語化できます。
（日本語化というよりは、たぶん文字コードをUTF8にしてる）

方法は、csvOptions={{ utf8WithBom: true }}を入れるだけ。
だいぶハショるけどこんな感じ。

import {
  DataGrid,
  GridToolbar,
  jaJP,
} from "@mui/x-data-grid";

const toolbar = () => (
  <GridToolbar csvOptions={{ utf8WithBom: true }}></GridToolbar>
);

<DataGrid
  components={{
    Toolbar: toolbar,
  }}
  localeText={jaJP.components.MuiDataGrid.defaultProps.localeText}
/>

最後のlocaleText={jaJP.components.MuiDataGrid.defaultProps.localeText}は日本語化。
これがないとメニューは英語表記になる。

さすがMUI。めっちゃ便利ですね。