react-data-grid实现列重排的组件导入问题咨询

嘿，我完全懂你的困惑！当初我第一次用react-data-grid做列重排的时候，也对着官网示例的代码挠头——为啥他们用的DraggableHeaderRenderer我找不到导入路径呢？

其实真相是：官网示例里的DraggableHeaderRenderer是他们为演示专门自定义的组件，并不是react-data-grid npm包对外暴露的公共API，所以你没法直接通过import语句引入它，必须把示例里的这段代码复制到自己的项目中复用。

不过别担心，这里给你两个实用的解决方案：

方案一：直接复用示例的自定义组件 #

这个方法最直接，和官网效果完全一致。你只需要把官网示例里的DraggableHeaderRenderer代码复制到你的项目中（比如新建一个DraggableHeaderRenderer.jsx文件），然后在你的表格组件中导入使用就行。这个组件的逻辑就是封装了拖拽事件的处理，代码量不大，复用起来很省心。

方案二：用react-data-grid内置的列重排能力 #

如果你的项目用的是v7及以上版本的react-data-grid，其实可以不用自定义渲染器，直接用库内置的列重排功能，步骤更简单：

• 确保你的列配置数组中，每个列都有唯一的key或id字段
• 给ReactDataGrid组件添加enableColumnReorder={true}属性开启拖拽
• 通过onColumnOrderChange回调函数，接收重新排序后的列数组，更新你的状态

给你个极简的示例代码参考：

import React, { useState } from 'react';
import { ReactDataGrid } from 'react-data-grid';

// 初始化列配置
const initialColumns = [
  { key: 'name', name: '姓名', draggable: true },
  { key: 'age', name: '年龄', draggable: true },
  { key: 'phone', name: '手机号', draggable: true },
];

// 模拟表格数据
const tableData = [
  { name: '张三', age: 28, phone: '138xxxx1234' },
  { name: '李四', age: 32, phone: '139xxxx5678' },
];

function ReorderableGrid() {
  const [columns, setColumns] = useState(initialColumns);

  // 处理列顺序变化
  const handleColumnReorder = (newColumns) => {
    setColumns(newColumns);
  };

  return (
    <ReactDataGrid
      columns={columns}
      rows={tableData}
      enableColumnReorder={true}
      onColumnOrderChange={handleColumnReorder}
      rowKey="name"
    />
  );
}

export default ReorderableGrid;

总结一下：如果想要和官网示例完全一致的自定义拖拽头部，就复制示例的DraggableHeaderRenderer代码；如果追求简洁，直接用库内置的列重排功能就够了。

备注：内容来源于stack exchange，提问作者gdv