Antd implements Table drag and drop to adjust column width

Table form column width drag and drop has no demo in the latest antd version, you need to go to the finished version to find 3.26.19

Integrate react-resizable to implement scalable columns.

function realization   

Install  react-resizable   

yarn add react-resizable -s

 Note: The premise of realizing the dragging function is that the columns must all set the column width

import React, { useEffect, useState } from 'react';
import { Table } from 'antd';
import { Resizable } from 'react-resizable';
import './style.less';
 
// 调整table表头
const ResizeableTitle = (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>
  );
};
 
// 拖拽调整table
const ResizeTable = () => {
 
  // table 数据
  const dataSource = () => {
    const data = []
    for(let i = 0; i <= 500; i++) {
      data.push({
        key: i,
        dnCode: '李友邦',
        barCode: 27,
        brandName: '徐州沛县',
      })
    }
    return data
  }
 
  // 表格列
  const [cols, setCols] = useState([
    {
      title: 'DN',
      dataIndex: 'dnCode',
      key: 'dnCode',
      ellipsis: true,
      fixed: 'left',
      width: 120,
      render: (text) => {
        return text || '-';
      },
      align: 'center',
    },
    {
      align: 'center',
      title: '商品编号',
      dataIndex: 'barCode',
      key: 'barCode',
      ellipsis: true,
      width: 120,
      render: (text) => {
        return text || '-';
      },
    },
    {
      align: 'center',
      title: '品牌名称',
      dataIndex: 'brandName',
      key: 'brandName',
      ellipsis: true,
      width: 120,
      render: (text) => {
        return text || '-';
      },
    },
    ······
  ]);
  const [columns, setColumns] = useState([])
 
  // 定义头部组件
  const components = {
    header: {
      cell: ResizeableTitle,
    },
  };
 
  // 处理拖拽
  const handleResize = (index) => (e, { size }) => {
    const nextColumns = [...cols];
    // 拖拽是调整宽度
    nextColumns[index] = {
      ...nextColumns[index],
      width: size.width,
    };
 
    setCols(nextColumns);
  };
 
  useEffect(() => {
    setColumns((cols || []).map((col, index) => ({
      ...col,
      onHeaderCell: (column) => ({
        width: column.width,
        onResize: handleResize(index),
      }),
    })))
  }, [cols])
 
  return (
    <div className="components-table-resizable-column">
      <Table
        size="small"
        bordered
        components={components}
        columns={columns}
        dataSource={dataSource()}
      />
    </div>
  )
}
 
export default ResizeTable;

style.less

 /* 内容过多以...显示 */
 .ellipsisText {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   display: block;
 }

 /* 显示拖拽样式 */
 .react-resizable {
   position: relative;
   background-clip: padding-box;
 }

 /* 显示拖拽手势 */
 .react-resizable-handle {
   position: absolute;
   width: 10px;
   height: 100%;
   bottom: 0;
   right: 0;
   cursor: col-resize;
   z-index: 6;
   //border-left: white 1px solid;
 }