@muiの「x-data-grid」でデータ（行）を削除する

@muiの「x-data-grid」でデータ（行）を削除するサンプルコードです。

ボタンを押すと選択したデータ（行）が削除されます。

検証バージョン
Data Gridで表を作成
削除ボタンと削除機能の実装
まとめ

検証バージョン

@emotion/react: 11.11.1
@emotion/styled: 11.11.0
@mui/material: 5.14.10
@mui/x-data-grid: 6.15.0
react: 18.2.0
react-dom: 18.2.0

現段階ではreact:18.2.0では@muiとの依存関係でエラーが出るときもあるようです。

その場合はreact:17.0.2だと動くそうです。

Data Gridで表を作成

表を表示するコードのサンプルです、これに削除ボタンを実装します。

import * as React from 'react';
import Box from '@mui/material/Box';
import { DataGrid, jaJP } from '@mui/x-data-grid';

const dateFormat = (v) => new Date(v.value).toLocaleString('ja-JP', { dateStyle: 'long' });

const columns = [
  { field: 'name', headerName: '名前', width: 180 },
  { field: 'age', headerName: '年齢', type: 'number', width: 80 },
  { field: 'birthday', headerName: '誕生日', type: 'date', width: 200, valueFormatter: dateFormat },
  { field: 'isAdmin', headerName: '管理者', type: 'boolean', width: 80 },
];

const rows = [
  { id: 1, name: '1st', age:10 , birthday: '2023-08-04', isAdmin: false },
  { id: 2, name: '2nd', age:20 , birthday: '2021-02-02', isAdmin: true },
  { id: 3, name: '3rd', age:30 , birthday: '2020-03-03', isAdmin: false },
];

export default function DataGridDemo() {
  return (
    <Box sx={{ width: '700px' }}>
      <DataGrid
        columns={columns}
        rows={rows}
        localeText={jaJP.components.MuiDataGrid.defaultProps.localeText}
        autoHeight
      />
    </Box>
  );
}

削除ボタンと削除機能の実装

x-data-gridはapiRefを使用することで簡単にデータを操作することができます。

import * as React from 'react';
import Box from '@mui/material/Box';
import { DataGrid, jaJP, useGridApiRef } from '@mui/x-data-grid';
import { Button } from '@mui/material';

const dateFormat = (v) => new Date(v.value).toLocaleString('ja-JP', { dateStyle: 'long' });

const columns = [
  { field: 'name', headerName: '名前', width: 180 },
  { field: 'age', headerName: '年齢', type: 'number', width: 80 },
  { field: 'birthday', headerName: '誕生日', type: 'date', width: 200, valueFormatter: dateFormat },
  { field: 'isAdmin', headerName: '管理者', type: 'boolean', width: 80 },
];

const rows = [
  { id: 1, name: '1st', age:10 , birthday: '2023-08-04', isAdmin: false },
  { id: 2, name: '2nd', age:20 , birthday: '2021-02-02', isAdmin: true },
  { id: 3, name: '3rd', age:30 , birthday: '2020-03-03', isAdmin: false },
];

export default function DataGridDemo() {
  const apiRef = useGridApiRef(); // apiRef宣言

  // 列の削除
  const delRows = () => {
    const delRow = apiRef.current.getSelectedRows();  // 選択されていデータをすべて取得(Map)

    delRow.forEach(v => {
      apiRef.current.updateRows([{ id: v.id, _action: 'delete' }]); // _action: 'delete'で指定idのデータを削除
    });
  }

  return (
    <Box sx={{ width: '700px' }}>
      <Box component='div' sx={{ p: 2, textAlign: 'right' }}>
        <Button variant="contained" color='warning' onClick={delRows}>削除</Button>
      </Box>
      <DataGrid
        apiRef={apiRef} // apiRefを使用する
        columns={columns}
        rows={rows}
        localeText={jaJP.components.MuiDataGrid.defaultProps.localeText}
        autoHeight
        checkboxSelection // チェックボックス表示
      />
    </Box>
  );
}

削除するデータ（行）を選択できるようにチェックボックス（checkboxSelection）を表示させます。

apiRef.current.getSelectedRows()で選択しているデータ（行）をMapで取得できます。

apiRef.current.updateRows()はの_actionをdeleteにすると、対象のidのデータを削除することができます。

Mapをループして選択したデータ（行）を_actionのdeleteで削除しています。

データ削除前

データ削除後

削除ボタンを押すとデータを削除できます。

まとめ

@mui/x-data-gridはapiRefが使用できるので、@material-ui/data-gridより楽にコーディングできるようになりました。

有料版の@mui/x-data-grid-proや@mui/x-data-grid-premiumもありますが、ノーマルでもかなり優秀です。

「checkboxSelection」を指定するだけでチェックボックスが描画されるので楽です。

DBでデータを管理する場合は削除ボタンを押した際にサーバへデータを送って削除が必要です。

毎回サーバにデータを送るより、一通り編集して最後に「保存」ボタンを実装するほうが楽かも。