MUI DataTableで行を削除する方法

1. テーブルのセットアップ: まず、MUI の DataTable コンポーネントをインストールし、プロジェクトに組み込みます。必要な依存関係をインストールしたら、次のようにテーブルをセットアップします。

import { DataTable } from '@mui/material';
// ...
<DataTable
  // テーブルの設定
>
  {/* 行とセルの表示 */}
</DataTable>

2. 行の削除: 行を削除するには、削除ボタンを含む各行をレンダリングし、ボタンがクリックされたときに削除処理を実行します。以下に例を示します。

import { DataTable, Button } from '@mui/material';
const data = [
  // テーブルのデータ
];
const handleRowDelete = (rowIndex) => {
  // 行の削除処理
};
<DataTable
  // テーブルの設定
>
  {data.map((row, index) => (
    <TableRow key={index}>
      {/* 行のセル */}
      <TableCell>{row.name}</TableCell>
      <TableCell>{row.age}</TableCell>
      <TableCell>
        <Button onClick={() => handleRowDelete(index)}>削除</Button>
      </TableCell>
    </TableRow>
  ))}
</DataTable>

上記の例では、data 配列にテーブルのデータが格納されています。handleRowDelete 関数は、削除ボタンがクリックされたときに呼び出され、rowIndex を引数として受け取ります。削除処理はここで実装し、必要に応じてデータ配列から行を削除します。

以上がMUI DataTableで行を削除する基本的な手順です。必要に応じてテーブルの設定やデータの形式を調整してください。