DataGridでテーブルの要素を操作する

2022.05.17

はじめに

こんにちは、 @zsp2088dev です。
MUIでテーブルを実装するときに、DataGridを使用することが多いと思います。
その際、テーブルの要素に対する操作を実装するかもしれません。

本記事では、DataGridを使用したテーブルの要素に対する操作の実装方法について紹介します。

今回作るもの

下記のテーブルをサンプルとして用意しました。
テーブルのカラムに名称、色、操作（編集・削除・保存）をもつ果物をまとめたテーブルです🍊

テーブルの要素

果物を表すtypeとそのリストです。
DataGridではidを要素に持たなくてはなりません。

type Fruit = {
  id: number;
  name: string;
  color: string;
};

const fruits: Fruit[] = [
  { id: 1, name: "リンゴ", color: "赤" },
  { id: 2, name: "バナナ", color: "黄" },
  { id: 3, name: "ブドウ", color: "紫" },
  { id: 4, name: "キウイ", color: "緑" },
];

状態管理と要素の削除

テーブルの状態管理にReact Hooksを使用しました。
今回はサンプルとしてテーブルの要素の削除を実装しました。
実際のプロダクトであれば外部APIを使用したデータの削除が想定されると思います。

const [rows, setRows] = useState<Fruit[]>(fruits);

const deleteFruit = (id: number) => {
  setRows(rows.filter((row: Fruit) => row.id != id));
};

カラムの設定

続いてテーブルのカラムの設定についてです。
テーブルの要素に対する操作の実装方法は次にまとめます。

const columns: GridColumns<Fruit> = [
  {
    field: "name",
    headerName: "名称",
    width: 150,
  },
  {
    field: "color",
    headerName: "色",
    width: 150,
  },
  {
    field: "actions",
    type: "actions",
    headerName: "操作",
    width: 150,
    headerAlign: "center",
    align: "center",
    getActions: (params: GridRowParams) => [
      <GridActionsCellItem
        key={params.id}
        label="edit"
        showInMenu={false}
        icon={<EditIcon />}
      />,
      <GridActionsCellItem
        key={params.id}
        label="delete"
        showInMenu={false}
        icon={<DeleteIcon />}
        onClick={() => deleteFruit(params.id as number)}
      />,
      <GridActionsCellItem
        key={params.id}
        label="save"
        showInMenu={false}
        icon={<SaveAltIcon />}
        onClick={() => console.log(params.id)}
      />,
    ],
  },
];

テーブルの要素に対する操作を実装する

上記のソースコードにあるgetActionsに、GridActionsCellItemのリストを渡すことでテーブルの要素に対する操作を実装することができます。
今回は、サンプルとして3つの操作（編集・削除・保存）ボタンを実装してみました。
iconにはMaterial Iconsのコンポーネントを指定、onClickにはアイコンクリック時の操作を指定しています。

次に、@mui/x-data-gridのソースコードを見てみます。
テーブルの要素に対する操作を実装するためには、typeにactionsを、getActionsにGridActionsCellItemを指定しなくてはならないことがわかります。

export interface GridActionsColDef extends GridColDef {
    type: 'actions';
    getActions: (params: GridRowParams) => React.ReactElement<GridActionsCellItemProps>[];
}

全体のコード

最後に、今回実装したテーブルのコードがこちらです。

import {
  DataGrid,
  GridActionsCellItem,
  GridColumns,
  GridRowParams,
} from "@mui/x-data-grid";
import DeleteIcon from "@mui/icons-material/Delete";
import SaveAltIcon from "@mui/icons-material/SaveAlt";
import EditIcon from "@mui/icons-material/Edit";
import { useState } from "react";

type Fruit = {
  id: number;
  name: string;
  color: string;
};

const fruits: Fruit[] = [
  { id: 1, name: "リンゴ", color: "赤" },
  { id: 2, name: "バナナ", color: "黄" },
  { id: 3, name: "ブドウ", color: "紫" },
  { id: 4, name: "キウイ", color: "緑" },
];

const Table = () => {
  const [rows, setRows] = useState<Fruit[]>(fruits);

  const deleteFruit = (id: number) => {
    setRows(rows.filter((row: Fruit) => row.id != id));
  };

  const columns: GridColumns<Fruit> = [
    {
      field: "name",
      headerName: "名称",
      width: 150,
    },
    {
      field: "color",
      headerName: "色",
      width: 150,
    },
    {
      field: "actions",
      type: "actions",
      headerName: "操作",
      width: 150,
      headerAlign: "center",
      align: "center",
      getActions: (params: GridRowParams) => [
        <GridActionsCellItem
          key={params.id}
          label="edit"
          showInMenu={false}
          icon={<EditIcon />}
        />,
        <GridActionsCellItem
          key={params.id}
          label="delete"
          showInMenu={false}
          icon={<DeleteIcon />}
          onClick={() => deleteFruit(params.id as number)}
        />,
        <GridActionsCellItem
          key={params.id}
          label="save"
          showInMenu={false}
          icon={<SaveAltIcon />}
          onClick={() => console.log(params.id)}
        />,
      ],
    },
  ];

  return <DataGrid columns={columns} rows={rows} />;
};

export default Table;

おわり

DataGridを使用したテーブルの要素に対する操作の実装方法について紹介しました。
typeとgetActionsを指定することでサクッと実装できますが、たどり着くまでに時間がかかってしまったので、同じように悩んでいる人に本記事が届くと嬉しいです！🤗