MUI X DataGrid选中行导出CSV功能实现问题求助

问题根源 #

你的代码核心问题是MUI X DataGrid新版本中onSelectionModelChange的参数结构变更：v5及以上版本中，该回调的参数不再是直接的选中ID数组，而是一个包含selectionModel属性的对象。你直接把newSelection当作数组处理，导致选中ID无法正确获取，日志输出异常，后续的行数据过滤也失效。

修正方案 #

1. 正确获取选中ID数组：从onSelectionModelChange的参数中提取selectionModel字段
2. 简化状态管理：无需同时维护选中ID和选中行数据两个状态，导出时通过ID过滤原数据即可，减少状态冗余

修正后的完整代码 #

import React, { useState } from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { Button } from '@mui/material';
import { CsvBuilder } from 'filefy';
import SaveAltIcon from '@mui/icons-material/SaveAlt';

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'name', headerName: 'Name', width: 150 },
  { field: 'email', headerName: 'Email', width: 200 },
  { field: 'phone', headerName: 'Phone Number', width: 150 },
  { field: 'age', headerName: 'Age', width: 110 },
  { field: 'year', headerName: 'Joining Year', width: 150 },
];

const rows = [
  { id: 1, name: "Neeraj", email: 'neeraj@gmail.com', phone: 9876543210, age: 23, year: 2019 },
  { id: 2, name: "Raj", email: 'raj@gmail.com', phone: 6678901234, age: 17, year: 2020 },
  { id: 3, name: "David", email: 'david342@gmail.com', phone: 6312345678, age: 34, year: 2019 },
  { id: 4, name: "Vikas", email: 'vikas75@gmail.com', phone: 9787654321, age: 20, year: 2021 },
  { id: 5, name: "John", email: 'john@gmail.com', phone: 8976543210, age: 25, year: 2020 },
];

const DataTable = () => {
  const [selectedRowIds, setSelectedRowIds] = useState([]);

  const handleRowSelection = (params) => {
    const selectedIDs = params.selectionModel;
    setSelectedRowIds(selectedIDs);

    console.log("Selected Row IDs:", selectedIDs);
  };

  const exportSelectedRows = () => {
    if (selectedRowIds.length === 0) {
      alert("No rows selected to export.");
      return;
    }

    const selectedData = rows.filter(row => selectedRowIds.includes(row.id));
    
    new CsvBuilder("selected-rows-data.csv")
      .setColumns(columns.map(col => col.headerName))
      .addRows(selectedData.map(row =>
        columns.map(col => row[col.field])
      ))
      .exportFile();
  };

  return (
    <div className="h-96 w-full">
      <DataGrid
        rows={rows}
        columns={columns}
        checkboxSelection
        pageSize={5}
        onSelectionModelChange={handleRowSelection}
      />
      <Button
        variant="contained"
        color="primary"
        className="mt-4"
        startIcon={<SaveAltIcon />}
        onClick={exportSelectedRows}
      >
        Export Selected Rows to CSV
      </Button>
    </div>
  );
};

export default DataTable;

关键修改说明 #

• 回调参数处理：将onSelectionModelChange的参数改为从params.selectionModel获取选中ID数组，适配新版本API
• 状态简化：移除selectedRowData状态，在导出时临时过滤数据，避免不必要的状态更新
• 调试优化：现在可以正确打印选中的ID数组，便于验证行选择是否生效

内容的提问来源于stack exchange，提问作者Daniel George