🐛

MUI v5 DataGridの使い方　その3 ～セルの縦線を表示する（不具合対応済み）～

2022/03/18に公開

React

mui

tech

前回に続いて、Vite+React+TypeScript 環境で MUI の DataGrid の使い方を、Tips的にまとめていきます。

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版)のエラー対応～

セルの右側に縦線を表示する

Grid に showCellRightBorder を指定するとセルの右側に線が表示できます。
が、バグっているのか最終行および最終列だけ線が表示されません。

列ヘッダのセルの右側はデフォルトで線が引かれていますが、Grid に showColumnRightBorder を指定すると、長めの線になります。　
が、コチラは列タイトルが空白の場合の表示が微妙です。

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: 'id',
      headerName: ''
    },
    {
      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,
          }}
          showColumnRightBorder // 列ヘッダセルの右側に線を引く
          showCellRightBorder   // セルの右側に線を引く
        />
      </div>
  )
}

autoHeight を指定するかによっても、表示されない罫線の場所が変わるようです。
この問題は issue に上がってます。

とりあえず修正版がでるまで、css で対応します。

列タイトルの罫線は showColumnRightBorder を指定し、
列タイトルがないセルは、列タイトルに全角スペースを指定します。

各セルは showCellRightBorder は指定せず、css で罫線を引きます。

ついでにヘッダのツールバーの下にも罫線を引きます。

import * as React from 'react'
import {
  DataGridPro,
  GridColDef,
  GridRowsProp,
  GridToolbar,
  GridActionsCellItem,
  GridRowParams
} from '@mui/x-data-grid-pro'
import { SvgIcon } from '@mui/material'
import { ReactComponent as godetail } from '@/assets/go_detail.svg'

const rows: GridRowsProp = [
  { id: 1, name: 'JIN', kana: 'ジン', birth: '1992年12月04日' },
  { id: 2, name: 'SUGA', kana: 'シュガ', birth: '1993年03月09日' },
  { id: 3, name: 'J-HOPE', kana: 'ジェイホープ', birth: '	1994年02月18日' },
  { id: 4, name: 'RM', kana: 'アールエム', birth: '1994年09月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年09月01日' }
]

export function List() {
  // アイコンをクリックしたときの処理
  const handleDetailClick = React.useCallback(
    (params: GridRowParams) => (event: { stopPropagation: () => void }) => {
      event.stopPropagation()
      console.log(`handleDetailClick:id=${params.id}`)
    },
    []
  )

  // 表示するアクションを返す関数です
  const getDetailAction = React.useCallback(
    (params: GridRowParams) => [
      <GridActionsCellItem
        icon={<SvgIcon component={godetail} sx={{ color: '#1e8cb0' }} />}
        label="編集"
        onClick={handleDetailClick(params)}
        color="inherit"
      />
    ],
    [handleDetailClick]
  )

  // グリッド列情報
  const cols: GridColDef[] = [
    {
      field: 'detailAction',
      headerName: '　',  // セルの右側に罫線を表示するために全角スペースを表示する
      align: 'left',
      width: 60,
      type: 'actions', 
      getActions: getDetailAction
    } as GridColDef,
    {
      field: 'id',
      headerName: '　',  // セルの右側に罫線を表示するために全角スペースを表示する
      width: 50,
      headerAlign: 'center',
      align: 'right'
    },
    {
      field: 'name',
      headerName: '英字',
      width: 200,
      headerAlign: 'center',
      align: 'left'
    },
    {
      field: 'kana',
      headerName: '仮名',
      width: 200,
      headerAlign: 'center',
      align: 'left'
    },
    {
      field: 'birth',
      headerName: '生年月日',
      width: 150,
      headerAlign: 'center',
      align: 'center'
    }
  ]

  return (
      <div style={{ width: '100%' }}>
        <DataGridPro
          sx={styles.grid}     // --> 不具合対応のためcssで罫線を引く
          columns={cols}
          rows={rows}
          density="compact"
          autoHeight
          components={{
            Toolbar: GridToolbar,
          }}
	  showColumnRightBorder   // 列ヘッダセルの右側に線を引く
          // showCellRightBorder  // セルの右側に線を引く   --> 不具合対応のためcssで罫線を引く         
        />
      </div>
  )
}

const styles = {
  grid: {
    '.MuiDataGrid-toolbarContainer': {
      borderBottom: 'solid 1px rgba(224, 224, 224, 1)'  // ついでにツールバーの下に罫線を引く
    },
    '.MuiDataGrid-row .MuiDataGrid-cell:not(:last-child)': {
      borderRight: 'solid 1px rgba(224, 224, 224, 1) !important'
    },
    // 2022/06/01 追記 列ヘッダの最終セルの右側に罫線が表示されなくなった・・・
    // 列ヘッダの最終列の右端に罫線を表示する
     '.MuiDataGrid-columnHeadersInner': {
      borderRight: 'solid 1px rgba(224, 224, 224, 1) !important'
    }
  }
}

罫線が引けました。

セルの右側に縦線を表示する

Discussion