当前位置：首页 > React

react如何实现表格列拖动

2026-01-25 13:14:53React

实现表格列拖动的步骤

使用 React 实现表格列拖动功能，可以借助第三方库如 react-dnd 或 react-beautiful-dnd。以下是具体实现方法：

使用 react-dnd 实现

安装 react-dnd 和 react-dnd-html5-backend：

npm install react-dnd react-dnd-html5-backend

创建一个可拖动的表格列组件：

import { useDrag, useDrop } from 'react-dnd';

const DraggableColumn = ({ id, index, moveColumn, children }) => {
  const [{ isDragging }, drag] = useDrag({
    type: 'COLUMN',
    item: { id, index },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  });

  const [, drop] = useDrop({
    accept: 'COLUMN',
    hover(item, monitor) {
      if (item.index === index) return;
      moveColumn(item.index, index);
      item.index = index;
    },
  });

  return (
    <div
      ref={(node) => drag(drop(node))}
      style={{ opacity: isDragging ? 0.5 : 1 }}
    >
      {children}
    </div>
  );
};

在表格组件中使用 DraggableColumn：

const Table = ({ columns, data }) => {
  const [cols, setCols] = useState(columns);

  const moveColumn = (fromIndex, toIndex) => {
    const updatedCols = [...cols];
    const [movedCol] = updatedCols.splice(fromIndex, 1);
    updatedCols.splice(toIndex, 0, movedCol);
    setCols(updatedCols);
  };

  return (
    <table>
      <thead>
        <tr>
          {cols.map((col, index) => (
            <DraggableColumn
              key={col.id}
              id={col.id}
              index={index}
              moveColumn={moveColumn}
            >
              <th>{col.title}</th>
            </DraggableColumn>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((row) => (
          <tr key={row.id}>
            {cols.map((col) => (
              <td key={col.id}>{row[col.dataKey]}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

使用 react-beautiful-dnd 实现

安装 react-beautiful-dnd：

npm install react-beautiful-dnd

实现拖拽表格列：

import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

const Table = ({ columns, data }) => {
  const [cols, setCols] = useState(columns);

  const onDragEnd = (result) => {
    if (!result.destination) return;
    const updatedCols = [...cols];
    const [movedCol] = updatedCols.splice(result.source.index, 1);
    updatedCols.splice(result.destination.index, 0, movedCol);
    setCols(updatedCols);
  };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <table>
        <thead>
          <Droppable droppableId="columns" direction="horizontal">
            {(provided) => (
              <tr ref={provided.innerRef} {...provided.droppableProps}>
                {cols.map((col, index) => (
                  <Draggable key={col.id} draggableId={col.id} index={index}>
                    {(provided) => (
                      <th
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                      >
                        {col.title}
                      </th>
                    )}
                  </Draggable>
                ))}
                {provided.placeholder}
              </tr>
            )}
          </Droppable>
        </thead>
        <tbody>
          {data.map((row) => (
            <tr key={row.id}>
              {cols.map((col) => (
                <td key={col.id}>{row[col.dataKey]}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </DragDropContext>
  );
};

注意事项

确保为每个可拖动的列分配唯一的 id。
拖拽操作完成后更新列的顺序状态。

使用 react-dnd 时需包裹应用在 DndProvider 中：

import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';

const App = () => (
  <DndProvider backend={HTML5Backend}>
    <Table columns={columns} data={data} />
  </DndProvider>
);

以上方法提供了两种实现表格列拖动的方案，可根据项目需求选择合适的库。

react如何实现表格列拖动