[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Zenn
🐛

MUI v5 DataGridの使い方　その1 ～基本の使い方から日本語化まで～

2022/03/17に公開
React
mui
tech

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