React Table v6能否实现行拖拽上下移动？求实现方案

完全可行，很多使用React Table v6的开发者都实现过表格行拖拽排序的功能，结合Bulma CSS框架的话，只需要配合第三方拖拽库（比如react-dnd）就能快速实现。以下是具体的实现思路和代码示例：

核心实现步骤 #

1. 安装拖拽依赖
   首先安装react-dnd和对应的HTML5后端：

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

2. 封装可拖拽行组件
   创建一个支持拖拽和放置的行组件，处理拖拽状态和行位置交换逻辑：

   import { useRef } from 'react';
   import { useDrag, useDrop } from 'react-dnd';
   
   const DraggableRow = ({ row, index, moveRow }) => {
     const ref = useRef(null);
   
     // 配置拖拽源
     const [{ isDragging }, drag] = useDrag({
       type: 'TABLE_ROW',
       item: { index },
       collect: monitor => ({
         isDragging: monitor.isDragging(),
       }),
     });
   
     // 配置放置目标
     const [, drop] = useDrop({
       accept: 'TABLE_ROW',
       hover(item, monitor) {
         if (!ref.current) return;
         const dragIndex = item.index;
         const hoverIndex = index;
   
         // 拖拽到自身位置时不处理
         if (dragIndex === hoverIndex) return;
   
         // 计算拖拽位置，判断是否需要交换行
         const hoverBoundingRect = ref.current.getBoundingClientRect();
         const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
         const clientOffset = monitor.getClientOffset();
         const hoverClientY = clientOffset.y - hoverBoundingRect.top;
   
         if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) return;
         if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) return;
   
         // 交换行位置并更新数据源
         moveRow(dragIndex, hoverIndex);
         item.index = hoverIndex;
       },
     });
   
     // 绑定拖拽和放置的ref
     drag(drop(ref));
   
     return (
       <tr 
         ref={ref} 
         style={{ opacity: isDragging ? 0.5 : 1, cursor: 'move' }}
         className={isDragging ? 'has-background-light' : ''}
       >
         {row.cells.map(cell => (
           <td key={cell.column.id} className="px-4 py-2">
             {cell.render('Cell')}
           </td>
         ))}
       </tr>
     );
   };
   
   export default DraggableRow;
   

3. 在表格组件中集成拖拽行
   用DndProvider包裹表格组件，替换React Table的默认行渲染为自定义的拖拽行，并处理数据源更新：

   import { useState } from 'react';
   import ReactTable from 'react-table-v6';
   import 'react-table-v6/react-table.css';
   import { DndProvider } from 'react-dnd';
   import { HTML5Backend } from 'react-dnd-html5-backend';
   import DraggableRow from './DraggableRow';
   
   const SortableTable = ({ initialData }) => {
     const [tableData, setTableData] = useState(initialData);
   
     // 行位置交换逻辑
     const moveRow = (dragIndex, hoverIndex) => {
       const newData = [...tableData];
       const draggedRow = newData[dragIndex];
       newData.splice(dragIndex, 1);
       newData.splice(hoverIndex, 0, draggedRow);
       setTableData(newData);
     };
   
     // 表格列配置（根据你的业务需求调整）
     const columns = [
       { Header: '名称', accessor: 'name' },
       { Header: '描述', accessor: 'description' },
       { Header: '操作', accessor: 'actions', Cell: row => <button className="button is-small is-primary">编辑</button> },
     ];
   
     return (
       <DndProvider backend={HTML5Backend}>
         <div className="container mt-4">
           <ReactTable
             data={tableData}
             columns={columns}
             renderRow={row => (
               <DraggableRow
                 row={row}
                 index={row.index}
                 moveRow={moveRow}
               />
             )}
             className="table is-striped is-hoverable"
           />
         </div>
       </DndProvider>
     );
   };
   
   export default SortableTable;
   

适配Bulma框架的注意事项 #

• 给React Table添加Bulma的table相关类（比如is-striped、is-hoverable），可以让表格样式和Bulma统一。
• 拖拽时的样式可以通过Bulma的辅助类（比如has-background-light）来优化，提升视觉反馈。
• 表格的容器可以用Bulma的container、mt-4等类来调整布局间距。

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