如何在MUI-X DataGridPremium中通过剪贴板添加新行？

不用纠结onBeforeClipboardPasteStart这类复杂事件，直接通过数据源操作+剪贴板结束事件就能搞定，步骤如下：

1. 提前在表格数据源中加入底部空行，用特殊标识（比如专属ID）区分，方便后续判断选中状态。
2. 开启表格的行级粘贴模式：设置clipboardPasteMode="row"。
3. 监听onClipboardPasteEnd事件，在回调里判断是否选中了底部空行，若是则将粘贴的行数据追加到数据源。

代码示例 #

import { DataGridPremium } from '@mui/x-data-grid-premium';
import { useState } from 'react';

export default function PasteToEmptyRowGrid() {
  const [rows, setRows] = useState([
    { id: 1, name: 'John Doe', age: 35 },
    { id: 2, name: 'Jane Smith', age: 28 },
    // 底部空行，用特殊ID标识
    { id: 'empty', name: '', age: '' }
  ]);

  const handleClipboardPasteEnd = (params) => {
    // 获取当前选中行
    const selectedRows = params.api.getSelectedRows();
    // 判断是否选中底部空行
    const isEmptyRowSelected = selectedRows.some(row => row.id === 'empty');

    if (isEmptyRowSelected) {
      // 过滤粘贴数据中的空行
      const validPastedRows = params.pastedRows.filter(row => 
        Object.values(row).some(val => val !== '')
      );
      // 生成不重复的新行ID
      const maxExistingId = Math.max(...rows.filter(r => typeof r.id === 'number').map(r => r.id));
      const newRowsWithIds = validPastedRows.map((row, idx) => ({
        ...row,
        id: maxExistingId + 1 + idx
      }));
      // 更新数据源：移除原空行 → 追加新行 → 重新添加空行（保持底部空行存在）
      setRows(prev => [
        ...prev.filter(r => r.id !== 'empty'),
        ...newRowsWithIds,
        { id: 'empty', name: '', age: '' }
      ]);
    }
  };

  return (
    <DataGridPremium
      rows={rows}
      columns={[
        { field: 'name', headerName: 'Name', width: 150 },
        { field: 'age', headerName: 'Age', type: 'number', width: 100 }
      ]}
      clipboardPasteMode="row"
      onClipboardPasteEnd={handleClipboardPasteEnd}
      // 可选：默认选中底部空行，减少用户操作
      selectionModel={['empty']}
    />
  );
}

补充说明 #

• 如果不需要保留底部空行，更新数据源时去掉最后添加空行的逻辑即可。
• 空行的标识可以根据业务调整，比如用isEmpty: true字段替代特殊ID，对应修改判断逻辑就行。

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