如何通过MUI X-Data-Grid自定义按钮触发单条记录CSV下载？

实现思路 #

社区版没有内置单条记录导出功能，但可以借助@mui/x-data-grid提供的exportDataAsCsv工具函数，结合行数据获取逻辑，通过自定义按钮触发导出操作。以下是两种常见场景的实现方案：

场景1：选中单条记录后导出 #

先开启表格的单选模式，再添加一个自定义按钮，点击时导出选中的行数据。

代码实现 #

1. 导入依赖

import { DataGrid, GridColumns, useGridApiContext, exportDataAsCsv } from '@mui/x-data-grid';

2. 自定义导出按钮组件

const SingleRowExportButton = () => {
  const apiRef = useGridApiContext();

  const handleExport = () => {
    // 获取选中的行（单选模式下只会有一条）
    const selectedRows = apiRef.current.getSelectedRows();
    if (Object.keys(selectedRows).length === 0) {
      alert('请先选择一条记录');
      return;
    }

    const targetRow = Object.values(selectedRows)[0];
    // 调用CSV导出函数
    exportDataAsCsv({
      apiRef,
      // 导出当前可见列，也可手动指定列字段：fields: ['id', 'name', 'age']
      fields: apiRef.current.getVisibleColumns().map(col => col.field),
      rows: [targetRow],
      fileName: `record-${targetRow.id}.csv`
    });
  };

  return (
    <button onClick={handleExport} style={{ padding: '8px 16px', margin: '0 10px' }}>
      导出选中记录为CSV
    </button>
  );
};

3. 集成到DataGrid

const columns: GridColumns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'name', headerName: '姓名', width: 150 },
  { field: 'age', headerName: '年龄', width: 110 },
  // 其他列配置...
];

const rows = [
  { id: 1, name: '张三', age: 25 },
  { id: 2, name: '李四', age: 30 },
];

export default function CustomExportGrid() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      {/* 把导出按钮放在表格上方 */}
      <div style={{ padding: '10px', textAlign: 'right' }}>
        <SingleRowExportButton />
      </div>
      <DataGrid
        rows={rows}
        columns={columns}
        checkboxSelection
        disableMultipleSelection // 开启单选模式
      />
    </div>
  );
}

场景2：每行添加导出按钮 #

直接在表格的操作列中添加导出按钮，点击即可导出当前行数据。

代码实现 #

在列配置中添加操作列：

const columns: GridColumns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'name', headerName: '姓名', width: 150 },
  { field: 'age', headerName: '年龄', width: 110 },
  {
    field: 'actions',
    headerName: '操作',
    width: 150,
    renderCell: (params) => {
      const apiRef = useGridApiContext();
      
      const handleRowExport = () => {
        exportDataAsCsv({
          apiRef,
          // 排除操作列，只导出业务列
          fields: apiRef.current.getVisibleColumns().map(col => col.field).filter(f => f !== 'actions'),
          rows: [params.row],
          fileName: `record-${params.row.id}.csv`
        });
      };

      return <button onClick={handleRowExport}>导出CSV</button>;
    }
  }
];

// 表格组件部分同场景1，无需额外添加顶部按钮

注意事项 #

• exportDataAsCsv依赖表格的apiRef来获取列的元数据，确保组件在DataGrid的上下文内使用（比如useGridApiContext必须在DataGrid的子组件中调用）。
• 可通过fields参数自定义导出的列，无需局限于可见列。
• 文件名可根据行的唯一标识（如id）动态生成，避免文件覆盖。

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