DataGridでテーブルの行を変更する方法

2022.08.04

はじめに

こんにちは、@zsp2088devです。
MUIのDataGridを使用して、テーブルの行を変更する方法について紹介します。

動作環境

next 12.2.3
@mui/material 5.9.3
@mui/x-data-grid 5.15.0

コード全体

今回使用したコードは下記のとおりです。

import { DataGrid } from "@mui/x-data-grid";
import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";

const rows = [
  { id: 1, name: "orange", price: 100 },
  { id: 2, name: "apple", price: 200 },
  { id: 3, name: "banana", price: 300 },
];

const columns = [
  { field: "name", headerName: "Name", width: 200, editable: true },
  { field: "price", headerName: "Price", width: 200, editable: true },
];

export default function Home() {
  const handleProcessRowUpdate = (newRow, oldRow) => {
    console.log(newRow);
    console.log(oldRow);

    return newRow;
  };

  return (
    <div style={{ height: 260, width: "100%" }}>
      <DataGrid
        rows={rows}
        columns={columns}
        processRowUpdate={handleProcessRowUpdate}
        onProcessRowUpdateError={(error) => console.log(error)}
        experimentalFeatures={{ newEditingApi: true }}
      />
    </div>
  );
}

やること

上記のコードを実行して、DataGridのテーブルを表示した後、テーブルの行を変更します。
今回は、bananaのpriceを、「300」から「900」に変更しました。

テーブルの行の変更を検知する

テーブルの行が変更されると、processRowUpdateが呼び出されます。
変更後の行（newRow）、変更前の行（oldRow）を取得でき、返り値でテーブルの行に値をセットすることができます。

processRowUpdate?: (newRow: R, oldRow: R) => Promise<R> | R;

これを使用することで、テーブルの行を変更したときに、「API呼び出しをしてデータを保存してnewRowを返却する。失敗時にはoldRowを返却する。」といった実装ができそうです。

動作確認

検証 > console より、変更後の行と変更前の行を確認します。
priceの値が変更されています。

注意点

processRowUpdateを使用するときは、experimentalFeatures={{ newEditingApi: true }}とする必要があります。

おわりに

MUIのDataGridを使用して、テーブルの行を変更する方法について紹介しました。
DataGridには非常に多くの機能があるため、やりたいことを実装するのも大変です。
DataGridのことについて、また新たに知ることがあれば、メモとして残していきたいです。