🐛
MUI v5 DataGridの使い方 その1 ～基本の使い方から日本語化まで～
Vite+React+TypeScript 環境で MUI v5 DataGridの使い方について、Tips的にまとめてみました。
MUI の導入方法についてはコチラ
Vite+React+TypeScript で、UIフレームワークにMUI(v5)を導入する。
MUI v5 DataGrid の記事一覧
MUI v5 DataGridの使い方 その1 ～基本の使い方から日本語化まで～
MUI v5 DataGridの使い方 その2 ～クリックできるアイコンセルを表示する～
MUI v5 DataGridの使い方 その3 ～セルの縦線を表示する（不具合対応済み）～
MUI v5 DataGridの使い方 その4 ～列ヘッダ、列の設定～
MUI v5 DataGridの使い方 その5 ～フッター～
MUI v5 DataGridの使い方 その6 ～グリッドのPropsの一覧～
MUI v5 DataGridの使い方 その7～有償版(Pro版)のエラー対応～
DataGrid をインストール
npm install @mui/x-data-grid
DataGridにデータを表示する
最小限のコードでDataGridにデータを表示します。
import { DataGrid, GridColDef, GridRowsProp } from '@mui/x-data-grid'
const rows: GridRowsProp = [
{ id: 1, name: 'JIN', kana: 'ジン', birth: '1992年12月4日' },
{ id: 2, name: 'SUGA', kana: 'シュガ', birth: '1993年3月9日' },
{ id: 3, name: 'J-HOPE', kana: 'ジェイホープ', birth: ' 1994年2月18日' },
{ id: 4, name: 'RM', kana: 'アールエム', birth: '1994年9月12日' },
{ id: 5, name: 'JIMIN', kana: 'ジミン', birth: '1995年10月13日' },
{ id: 6, name: 'V', kana: 'ヴィ', birth: '1995年12月30日' },
{ id: 7, name: 'JUNG KOOK', kana: 'ジョングク', birth: '1997年9月1日' }
]
export function List() {
const cols: GridColDef[] = [
{
field: 'name',
headerName: '英字'
},
{
field: 'kana',
headerName: '仮名'
},
{
field: 'birth',
headerName: '生年月日'
}
]
return (
<div style={{ width: '100%', height: 300 }}>
<DataGrid columns={cols} rows={rows} />
</div>
)
}
DataGrid の行の高さを調整する
DataGrid の density に compact（狭め）、standard（標準）、comfortable（広め）のいずれかを指定します。
デフォルトは standard です。
<div style={{ width: '100%', height: 300 }}>
<DataGrid columns={cols} rows={rows} density='compact'/>
</div>
density=compact を指定したので、行高が少し狭めになりました。
DataGrid の高さを自動調整する
データ量に合わせて データグリッド自体の高さを自動調整するには、autoHeight を指定します。
<div style={{ width: '100%' }}> // height の指定を削除
<DataGrid columns={cols} rows={rows} density='compact' autoHeight/>
</div>
スクロールバーが消えて、全データが表示されています。
DataGrid のヘッダにツールバーを表示する
DataGrid の components に {Toolbar: GridToolbar} を指定します。
import {
DataGrid,
GridColDef,
GridRowsProp,
GridToolbar,
} from '@mui/x-data-grid'
const rows: GridRowsProp = [
{ id: 1, name: 'JIN', kana: 'ジン', birth: '1992年12月4日' },
{ id: 2, name: 'SUGA', kana: 'シュガ', birth: '1993年3月9日' },
{ id: 3, name: 'J-HOPE', kana: 'ジェイホープ', birth: ' 1994年2月18日' },
{ id: 4, name: 'RM', kana: 'アールエム', birth: '1994年9月12日' },
{ id: 5, name: 'JIMIN', kana: 'ジミン', birth: '1995年10月13日' },
{ id: 6, name: 'V', kana: 'ヴィ', birth: '1995年12月30日' },
{ id: 7, name: 'JUNG KOOK', kana: 'ジョングク', birth: '1997年9月1日' }
]
export function List() {
const cols: GridColDef[] = [
{
field: 'name',
headerName: '英字'
},
{
field: 'kana',
headerName: '仮名'
},
{
field: 'birth',
headerName: '生年月日'
}
]
return (
<div style={{ width: '100%' }}>
<DataGrid
columns={cols}
rows={rows}
density="compact"
autoHeight
components={{
Toolbar: GridToolbar, // ツールバーを指定する
}}
/>
</div>
)
}
グリッドのヘッダーにツールバーが表示されました。
DataGrid のヘッダのツールバーに表示する項目を変更する
CustomToolbar コンポーネントを作成し、DataGrid の components に指定します。
import {
DataGrid,
GridColDef,
GridRowsProp,
GridToolbarContainer,
GridToolbarColumnsButton,
GridToolbarExport,
} from '@mui/x-data-grid'
const rows: GridRowsProp = [
{ id: 1, name: 'JIN', kana: 'ジン', birth: '1992年12月4日' },
{ id: 2, name: 'SUGA', kana: 'シュガ', birth: '1993年3月9日' },
{ id: 3, name: 'J-HOPE', kana: 'ジェイホープ', birth: ' 1994年2月18日' },
{ id: 4, name: 'RM', kana: 'アールエム', birth: '1994年9月12日' },
{ id: 5, name: 'JIMIN', kana: 'ジミン', birth: '1995年10月13日' },
{ id: 6, name: 'V', kana: 'ヴィ', birth: '1995年12月30日' },
{ id: 7, name: 'JUNG KOOK', kana: 'ジョングク', birth: '1997年9月1日' }
]
// カスタムツールバーを作成
function CustomToolbar() {
return (
<GridToolbarContainer>
<GridToolbarColumnsButton />
<GridToolbarExport />
</GridToolbarContainer>
)
}
export function List() {
const cols: GridColDef[] = [
{
field: 'name',
headerName: '英字'
},
{
field: 'kana',
headerName: '仮名'
},
{
field: 'birth',
headerName: '生年月日'
}
]
return (
<div style={{ width: '100%' }}>
<DataGrid
columns={cols}
rows={rows}
density="compact"
autoHeight
components={{
Toolbar: CustomToolbar, // カスタムツールバーを指定する
}}
/>
</div>
)
}
グリッドのヘッダーのツールバーに表示された項目が変更されました。
DataGrid を 日本語化する
先ほど表示したツールバーが英語表示なので日本語表示に変更します。
日本語ファイルを適用したテーマを、Grid に適用します。
import {
DataGrid,
GridColDef,
GridRowsProp,
GridToolbarContainer,
GridToolbarColumnsButton,
GridToolbarExport,
jaJP // 日本語用のファイルをインポート
} from '@mui/x-data-grid'
import { createTheme, ThemeProvider } from '@mui/material/styles'
const rows: GridRowsProp = [
{ id: 1, name: 'JIN', kana: 'ジン', birth: '1992年12月4日' },
{ id: 2, name: 'SUGA', kana: 'シュガ', birth: '1993年3月9日' },
{ id: 3, name: 'J-HOPE', kana: 'ジェイホープ', birth: ' 1994年2月18日' },
{ id: 4, name: 'RM', kana: 'アールエム', birth: '1994年9月12日' },
{ id: 5, name: 'JIMIN', kana: 'ジミン', birth: '1995年10月13日' },
{ id: 6, name: 'V', kana: 'ヴィ', birth: '1995年12月30日' },
{ id: 7, name: 'JUNG KOOK', kana: 'ジョングク', birth: '1997年9月1日' }
]
function CustomToolbar() {
return (
<GridToolbarContainer>
<GridToolbarColumnsButton />
<GridToolbarExport />
</GridToolbarContainer>
)
}
export function List() {
const cols: GridColDef[] = [
{
field: 'name',
headerName: '英字'
},
{
field: 'kana',
headerName: '仮名'
},
{
field: 'birth',
headerName: '生年月日'
}
]
return (
- // <ThemeProvider theme={theme}> // 日本語対応したテーマを適用する
<div style={{ width: '100%' }}>
<DataGrid
columns={cols}
rows={rows}
density="compact"
autoHeight
components={{
Toolbar: CustomToolbar
}}
/>
+ localeText={jaJP.components.MuiDataGrid.defaultProps.localeText}
</div>
- // </ThemeProvider>
)
}
// 日本語対応したテーマを作成
const theme = createTheme({}, jaJP)
一部、英語のままの部分も残りますが、日本語対応できました。
DataGrid を もっと細かく日本語化する
先の例だと、エクスポートの中の「Print」が「印刷」になってなかったりするので、もっと細かく日本語化します。
日本語化ファイルをコピー
ココから、jaJP.ts ファイルをコピーして、自分のアプリ内の適当な場所に配置します。
EsLint を使用している場合はエラーになると思いますので、ファイル先頭に/* eslint-disable */ として、ファイル自体を EsLint のチェック対象外にします。
import のファイルパスを修正し、エクスポートツールバーの「Print」を 「印刷」にします。
customJaJP.ts
+ /* eslint-disable */
import { jaJP as jaJPCore } from '@mui/material/locale';
- import { GridLocaleText } from '../models/api/gridLocaleTextApi';
+ import { GridLocaleText } from '@mui/x-data-grid/models/api/gridLocaleTextApi';
- import { getGridLocalization, Localization } from '../utils/getGridLocalization';
+ import { getGridLocalization, Localization } from '@mui/x-data-grid/utils/getGridLocalization';
const jaJPGrid: Partial<GridLocaleText> = {
// Root
noRowsLabel: '行がありません。',
noResultsOverlayLabel: '結果がありません。',
errorOverlayDefaultLabel: 'エラーが発生しました。',
// Density selector toolbar button text
toolbarDensity: '行間隔',
toolbarDensityLabel: '行間隔',
toolbarDensityCompact: 'コンパクト',
toolbarDensityStandard: '標準',
toolbarDensityComfortable: 'ひろめ',
// Columns selector toolbar button text
toolbarColumns: '列一覧',
toolbarColumnsLabel: '列選択',
// Filters toolbar button text
toolbarFilters: 'フィルター',
toolbarFiltersLabel: 'フィルター表示',
toolbarFiltersTooltipHide: 'フィルター非表示',
toolbarFiltersTooltipShow: 'フィルター表示',
toolbarFiltersTooltipActive: (count) => `${count}件のフィルターを適用中`,
// Export selector toolbar button text
toolbarExport: 'エクスポート',
toolbarExportLabel: 'エクスポート',
toolbarExportCSV: 'CSVダウンロード',
// toolbarExportPrint: 'Print',
+ toolbarExportPrint: '印刷', // ★ココを追加
// Columns panel text
columnsPanelTextFieldLabel: '列検索',
columnsPanelTextFieldPlaceholder: '検索クエリを入力...',
columnsPanelDragIconLabel: '列並べ替え',
columnsPanelShowAllButton: 'すべて表示',
columnsPanelHideAllButton: 'すべて非表示',
// Filter panel text
filterPanelAddFilter: 'フィルター追加',
filterPanelDeleteIconLabel: '削除',
// filterPanelLinkOperator: 'Logic operator',
filterPanelOperators: 'オペレータ',
// TODO v6: rename to filterPanelOperator
filterPanelOperatorAnd: 'And',
filterPanelOperatorOr: 'Or',
filterPanelColumns: '列',
filterPanelInputLabel: '値',
filterPanelInputPlaceholder: '値を入力...',
// Filter operators text
filterOperatorContains: '...を含む',
filterOperatorEquals: '...に等しい',
filterOperatorStartsWith: '...で始まる',
filterOperatorEndsWith: '...で終わる',
filterOperatorIs: '...である',
filterOperatorNot: '...でない',
filterOperatorAfter: '...より後ろ',
filterOperatorOnOrAfter: '...以降',
filterOperatorBefore: '...より前',
filterOperatorOnOrBefore: '...以前',
filterOperatorIsEmpty: '...空である',
filterOperatorIsNotEmpty: '...空でない',
// filterOperatorIsAnyOf: 'is any of',
// Filter values text
// filterValueAny: 'any',
// filterValueTrue: 'true',
// filterValueFalse: 'false',
// Column menu text
columnMenuLabel: 'メニュー',
columnMenuShowColumns: '列表示',
columnMenuFilter: 'フィルター',
columnMenuHideColumn: '列非表示',
columnMenuUnsort: 'ソート解除',
columnMenuSortAsc: '昇順ソート',
columnMenuSortDesc: '降順ソート',
// Column header text
columnHeaderFiltersTooltipActive: (count) => `${count}件のフィルターを適用中`,
columnHeaderFiltersLabel: 'フィルター表示',
columnHeaderSortIconLabel: 'ソート',
// Rows selected footer text
footerRowSelected: (count) => `${count}行を選択中`,
// Total row amount footer text
footerTotalRows: '総行数:',
// Total visible row amount footer text
footerTotalVisibleRows: (visibleCount, totalCount) =>
`${visibleCount.toLocaleString()} / ${totalCount.toLocaleString()}`,
// Checkbox selection text
checkboxSelectionHeaderName: 'チェックボックス',
// checkboxSelectionSelectAllRows: 'Select all rows',
// checkboxSelectionUnselectAllRows: 'Unselect all rows',
// checkboxSelectionSelectRow: 'Select row',
// checkboxSelectionUnselectRow: 'Unselect row',
// Boolean cell text
booleanCellTrueLabel: '真',
booleanCellFalseLabel: '偽',
// Actions cell more text
// actionsCellMore: 'more',
// Column pinning text
// pinToLeft: 'Pin to left',
// pinToRight: 'Pin to right',
// unpin: 'Unpin',
// Tree Data
// treeDataGroupingHeaderName: 'Group',
// treeDataExpand: 'see children',
// treeDataCollapse: 'hide children',
// Grouping columns
// groupingColumnHeaderName: 'Group',
// groupColumn: name => `Group by ${name}`,
// unGroupColumn: name => `Stop grouping by ${name}`,
// Master/detail
// expandDetailPanel: 'Expand',
// collapseDetailPanel: 'Collapse',
};
export const jaJP: Localization = getGridLocalization(jaJPGrid, jaJPCore);
あとは jaJP の import を、先ほど作成した customJaJP から import するように変更します。
import {
DataGrid,
GridColDef,
GridRowsProp,
GridToolbarContainer,
GridToolbarColumnsButton,
GridToolbarExport,
// jaJP
} from '@mui/x-data-grid'
import { createTheme, ThemeProvider } from '@mui/material/styles'
import { jaJP } from './customJaJP' // カスタム日本語化ファイルを読み込む
const rows: GridRowsProp = [
{ id: 1, name: 'JIN', kana: 'ジン', birth: '1992年12月4日' },
{ id: 2, name: 'SUGA', kana: 'シュガ', birth: '1993年3月9日' },
{ id: 3, name: 'J-HOPE', kana: 'ジェイホープ', birth: ' 1994年2月18日' },
{ id: 4, name: 'RM', kana: 'アールエム', birth: '1994年9月12日' },
{ id: 5, name: 'JIMIN', kana: 'ジミン', birth: '1995年10月13日' },
{ id: 6, name: 'V', kana: 'ヴィ', birth: '1995年12月30日' },
{ id: 7, name: 'JUNG KOOK', kana: 'ジョングク', birth: '1997年9月1日' }
]
function CustomToolbar() {
return (
<GridToolbarContainer>
<GridToolbarColumnsButton />
<GridToolbarExport />
</GridToolbarContainer>
)
}
export function List() {
const cols: GridColDef[] = [
{
field: 'name',
headerName: '英字'
},
{
field: 'kana',
headerName: '仮名'
},
{
field: 'birth',
headerName: '生年月日'
}
]
return (
- // <ThemeProvider theme={theme}> // 日本語対応したテーマを適用する
<div style={{ width: '100%' }}>
<DataGrid
columns={cols}
rows={rows}
density="compact"
autoHeight
components={{
Toolbar: CustomToolbar
}}
/>
</div>
+ localeText={jaJP.components.MuiDataGrid.defaultProps.localeText}
- </ThemeProvider>
)
}
// 日本語対応したテーマを作成
const theme = createTheme({}, jaJP)
エクスポートの「Print」が「印刷」に変わりました。
まとめ
長くなったので、Grid の使い方 tips の続きは、また別記事で投稿します。
Discussion