MUI(Material UI)のDataGridでセルとヘッダーに独自のコンポーネントを設置する方法【React】

ReactのUIフレームワークであるMUI(Material UI)のDataGridにて、セルとヘッダーに独自のコンポーネントを設置する方法を解説していきます。
セルの中にクリックできるボタンを設置したりと色々とカスタマイズすることができます。

MUI DataGridのセルの中にコンポーネントを設置する

import { Button, Container } from '@mui/material'
import { DataGrid, GridColDef, GridRenderCellParams } from '@mui/x-data-grid'

const Home = () => {
  const columns: GridColDef[] = [
    { field: 'id', headerName: 'ID' },
    { field: 'name', headerName: 'NAME' },
    {
      field: 'email',
      headerName: 'E-MAIL',
      width: 200,
      renderCell: (params) => {
        return <RenderCellComponent {...params} />
      }
    }
  ]

  const RenderCellComponent = (params: GridRenderCellParams) => {
    const onClick = () => {
      alert(params.row.email)
    }
    return (
      <Button variant="contained" onClick={onClick} fullWidth>
        Click
      </Button>
    )
  }

  const rows = [
    {
      id: 1,
      name: 'Taro',
      email: '[e-mail]'
    },
    {
      id: 2,
      name: 'Ken',
      email: '[e-mail]'
    },
    {
      id: 3,
      name: 'Yui',
      email: '[e-mail]'
    }
  ]

  return (
    <Container>
      <DataGrid columns={columns} rows={rows} autoHeight checkboxSelection />
    </Container>
  )
}

export default Home

columnsのrenderCellにコンポーネントを返すことで独自のコンポーネントをセル内に配置することができます。
renderCellのコールバック関数でセルの情報を受け取りコンポーネントに渡すことができます。

renderCell: (params) => {
  return <RenderCellComponent {...params} />
}

今回の例ではMUIのButton Componentを配置しています。

onClickなどのイベントも設定することが可能です。

MUI DataGridのヘッダーの中にコンポーネントを設置する

import EmailIcon from '@mui/icons-material/Email'
import { Box, Container } from '@mui/material'
import { DataGrid, GridColDef, GridColumnHeaderParams } from '@mui/x-data-grid'

const Home = () => {
  const columns: GridColDef[] = [
    { field: 'id', headerName: 'ID' },
    { field: 'name', headerName: 'NAME' },
    {
      field: 'email',
      headerName: 'E-MAIL',
      width: 200,
      renderHeader: (params: GridColumnHeaderParams) => {
        return <RenderHeaderComponent {...params} />
      }
    }
  ]

  const RenderHeaderComponent = (params: GridColumnHeaderParams) => {
    return (
      <Box display="flex" sx={{ alignItems: 'center' }}>
        <EmailIcon color="inherit" />
        <Box>{params.colDef.headerName}</Box>
      </Box>
    )
  }

  const rows = [
    {
      id: 1,
      name: 'Taro',
      email: '[e-mail]'
    },
    {
      id: 2,
      name: 'Ken',
      email: '[e-mail]'
    },
    {
      id: 3,
      name: 'Yui',
      email: '[e-mail]'
    }
  ]

  return (
    <Container>
      <DataGrid columns={columns} rows={rows} autoHeight checkboxSelection />
    </Container>
  )
}

export default Home

columnsのrenderHeaderにコンポーネントを返すことで、独自のコンポーネントをDataGridのヘッダー内に配置することができます。アイコンなどを一緒に表示する際などに役立つかなと思います。

renderHeaderのコールバック関数でヘッダーの情報を受け取りコンポーネントに渡すことができます。

renderHeader: (params: GridColumnHeaderParams) => {
  return <RenderHeaderComponent {...params} />
}

const RenderHeaderComponent = (params: GridColumnHeaderParams) => {
  console.log(params.colDef.headerName)
}

参考