React MUI X DataGrid自定义列拖拽实现方案咨询

核心思路 #

利用HTML5原生拖拽API，结合React状态管理维护列顺序，通过自定义表头单元格绑定拖拽事件，实现列的拖拽重排。

实现步骤与代码示例 #

1. 基础依赖与初始数据

导入必要组件并定义初始列配置、表格数据：

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

// 初始列配置
const initialColumns = [
  { field: 'id', headerName: 'ID', width: 100 },
  { field: 'name', headerName: '姓名', width: 150 },
  { field: 'age', headerName: '年龄', width: 100 },
  { field: 'email', headerName: '邮箱', width: 200 },
];

// 示例行数据
const rows = [
  { id: 1, name: '张三', age: 25, email: 'zhangsan@example.com' },
  { id: 2, name: '李四', age: 30, email: 'lisi@example.com' },
  { id: 3, name: '王五', age: 28, email: 'wangwu@example.com' },
];

2. 拖拽事件与状态管理

在组件内部维护列顺序状态，实现拖拽相关事件处理逻辑：

export default function DraggableDataGrid() {
  const [columns, setColumns] = useState(initialColumns);
  let draggedColumnIndex = null;

  // 拖拽开始：记录索引并添加视觉反馈
  const handleDragStart = (e, index) => {
    draggedColumnIndex = index;
    e.dataTransfer.setData('text/plain', index);
    e.currentTarget.style.opacity = '0.5';
  };

  // 拖拽经过：阻止默认行为以允许放置
  const handleDragOver = (e) => {
    e.preventDefault();
  };

  // 拖拽结束：恢复视觉状态
  const handleDragEnd = (e) => {
    e.currentTarget.style.opacity = '1';
  };

  // 拖拽释放：重新排列列数组并更新状态
  const handleDrop = (e, targetIndex) => {
    e.preventDefault();
    if (draggedColumnIndex === null || draggedColumnIndex === targetIndex) return;

    const newColumns = [...columns];
    const draggedColumn = newColumns.splice(draggedColumnIndex, 1)[0];
    newColumns.splice(targetIndex, 0, draggedColumn);

    setColumns(newColumns);
    draggedColumnIndex = null;
  };

3. 自定义表头单元格

通过renderHeader替换默认表头，添加拖拽功能与样式：

const CustomHeaderCell = ({ column, index }) => {
    return (
      <div
        draggable
        onDragStart={(e) => handleDragStart(e, index)}
        onDragOver={handleDragOver}
        onDragEnd={handleDragEnd}
        onDrop={(e) => handleDrop(e, index)}
        style={{
          padding: '16px',
          cursor: 'grab',
          display: 'flex',
          alignItems: 'center',
          userSelect: 'none', // 防止拖拽时选中文字
        }}
      >
        {column.headerName}
        <span style={{ marginLeft: '8px', fontSize: '18px' }}>⋮⋮</span>
      </div>
    );
  };

4. 渲染DataGrid组件

绑定自定义表头，渲染最终表格：

return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns.map((col, idx) => ({
          ...col,
          renderHeader: () => <CustomHeaderCell column={col} index={idx} />,
        }))}
        disableColumnMenu // 可选：禁用默认列菜单避免事件冲突，如需保留需调整布局
      />
    </div>
  );
}

额外优化建议 #

• 添加拖拽占位符提示，让用户更直观看到列的目标位置。
• 若需保留列菜单，可在CustomHeaderCell中集成原菜单组件，注意处理事件冒泡避免冲突。
• 持久化列顺序：将排序后的列配置存储到localStorage或后端，页面刷新后自动恢复。

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