Material UI - React JS :使用切换按钮更改选择模式DataGrid

import React, { useState } from 'react';
import { DataGrid, GridColDef, GridRenderCellParams, Switch, Typography } from '@mui/x-data-grid';

const columns: GridColDef[] = [
  { field: 'id', headerName: 'ID', width: 70 },
  { field: 'name', headerName: 'Name', width: 130 },
  { field: 'age', headerName: 'Age', type: 'number', width: 90 },
];

const rows = [
  { id: 1, name: 'John Doe', age: 30 },
  { id: 2, name: 'Jane Smith', age: 25 },
  // 其他行数据
];

function App() {
  const [selectionModel, setSelectionModel] = useState([]);
  const [isRowSelection, setIsRowSelection] = useState(true);

  const handleSwitchChange = (event) => {
    setIsRowSelection(event.target.checked);
  };

  const renderCell = (params: GridRenderCellParams) => {
    if (params.field === 'select') {
      return (
        <Switch
          checked={isRowSelection}
          onChange={handleSwitchChange}
          color="primary"
        />
      );
    }
    return params.value;
  };

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={[
          { field: 'select', headerName: 'Select Mode', renderCell: renderCell },
          ...columns,
        ]}
        selectionModel={selectionModel}
        onSelectionModelChange={(model) => setSelectionModel(model)}
        rowSelection={isRowSelection ? 'multiple' : 'single'}
      />
      <Typography variant="body1">
        Current Selection Mode: {isRowSelection ? 'Multiple' : 'Single'}
      </Typography>
    </div>
  );
}

export default App;