问题：react的antd Design组件库的表格不支持表格头拖拽 又增需求让拖拽

解决：react-draggable(4.4.5)我用的是这个版本 使用这个后 表格的宽度好像是必须给的

// 属性和组件库的表格一样 该怎么传就怎么传 但是表格列 宽度好像是必须给大小的
// 这是封装好的组件了 可以直接使用 
import { Table } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import { Resizable } from 'react-resizable';
import './index.css';
const ResizableTitle = (props) => {
    const { onResize, width, ...restProps } = props;
    if (!width) {
        return <th {...restProps} />;
    }
    return (
        <Resizable
            width={width}
            height={0}
            onResize={onResize}
            draggableOpts={{ enableUserSelectHack: false }}
        >
            <th {...restProps} />
        </Resizable>
    );
};

const ResizeTable = (props) => {
    let { columns, dataSource, ...rest } = props;
    const [cols, setCols] = useState(props.columns);
    const colsRef = useRef([]);

    const components = {
        header: {
            cell: ResizableTitle
        }
    };
    useEffect(() => {
        setCols(props.columns);
    }, [props.columns]);

    const handleResize =
        (index) =>
        (e, { size }) => {
            console.log(size);
            const nextColumns = [...cols];
            nextColumns[index] = {
                ...nextColumns[index],
                width: size.width
            };
            setCols(nextColumns);
        };

    colsRef.current = (cols || []).map((col, index) => ({
        ...col,
        onHeaderCell: (column) => ({
            width: column.width,
            onResize: handleResize(index)
        })
    }));

    return (
        <div className="components-table-resizable-column">
            <Table
                components={components}
                columns={colsRef.current}
                dataSource={props.dataSource}
                {...rest}
            />
        </div>
    );
};

export default ResizeTable;

// css文件
/* 内容过多以...显示 */
.ellipsisText {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* 显示拖拽样式 */
.components-table-resizable-column .react-resizable {
    position: relative;
    max-width: 2000px;
    background-clip: padding-box;
}
.components-table-resizable-column .react-resizable-handle {
    position: absolute;
    right: -9px;
    bottom: 0;
    z-index: 1;
    width: 10px;
    height: 100%;
    border-left: rgb(230, 230, 250) 1px solid;
    cursor: col-resize;
}
.ant-table-wrapper {
    max-width: calc(100vw - 480px);
}