中文 | English

安装

npm install antd-draggable-table

在线演示

antd-draggable-table demo

本地启动预览：

npm run preview

依赖要求

| 依赖 | 版本 | |------|------| | react | >=18.2.0 | | react-dom | >=18.2.0 | | antd | >=6.0.0 | | @ant-design/icons | >=5.0.0 |

使用示例

import { DraggableTable } from "antd-draggable-table";
import { useState } from "react";

function App() {
  const [data, setData] = useState([
    { id: "1", name: "张三" },
    { id: "2", name: "李四" },
    { id: "3", name: "王五" },
  ]);

  return (
    <DraggableTable
      rowKey="id"
      columns={[{ key: "name", title: "姓名", dataIndex: "name" }]}
      dataSource={data}
      onDrag={setData}
    />
  );
}

API

DraggableTableProps 继承 TableProps，所以 antd Table 的所有标准属性（columns、dataSource、size、scroll 等）照常用——除了 components 和 pagination 由组件内部接管。

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | rowKey | keyof RecordType | — | 行唯一标识字段 | | onDrag | (newData: RecordType[]) => void | — | 拖拽完成后触发，接收新顺序的数组（不会修改原始 dataSource） |

本地开发

git clone https://github.com/Czw96/antd-draggable-table.git
cd antd-draggable-table
npm install

npm run dev         # 监听构建
npm run build       # 生产构建

许可证

MIT © Czw96