react antd组件中table实现左右拖拽表头

1. 安装第三方库 

   npm i react-resizable --save

2. 引入第三方库 

   import { Resizable } from 'react-resizable'
   
   import "react-resizable/css/styles.css"

3. 配置表头拉伸组件（下面代码放在组件外部，否则每次拖拽无法更新） 

   // 可伸缩表头组件
   const ResizableTitle = ({ onResize, width, ...restProps }) => {
       if (!width) { return (<th {...restProps} />) };
   
       return (
           <Resizable
               width={width}
               height={0}
               handle={
                   <span
                       className="react-resizable-handle"
                       onClick={e => { e.stopPropagation() }}
                   />
               }
               onResize={onResize}
               draggableOpts={{ enableUserSelectHack: false }}
           >
               <th {...restProps} style={{ ...restProps?.style, userSelect: 'none' }} />
           </Resizable>
       );
   };
   

4.  配置表格列columns(最后一列不要设置宽度，否则会引起异常)

   const columns = [
       {
         title: 'name',
         dataIndex: 'name',
         width : 100,
       },
       {
         title: 'code',
         dataIndex: 'code',
         width : 100,
         defaultSortOrder: 'descend',
         sorter: (a, b) => a.code - b.code,
       },
       {
         title: 'key',
         dataIndex: 'key',
       },
     ];

5.  重新配置表格列，拉伸的方法

   // 可伸缩表头组件
   const [column, setColumn] = useState(
       columns.map(it => {
         it.ellipsis = {
           showTitle: true
         }
         it.onHeaderCell = col => ({
           width: col.width,
           // !传入newColumn，而不传入column，需要拿到有onHeaderCell的值
           onResize: (e, { size }) => handleResize(col, size),
         })
         return it;
       }
       )
     );
   

6.  拉伸回调的方法

   // table的th实时宽度拖拽的改变
     const handleResize = (col, size) => {
       setColumn(column.map(item => {
         if (item.dataIndex === col.dataIndex) {
           item.width = size.width;
         }
         return item
       }))
     }
   

7.  自定义拖拽标志

   .react-resizable-handle {
     	position: absolute;
     	right: -5px;
     	bottom: 0;
     	z-index: 1;
     	width: 10px;
     	height: 100%;
     	cursor: col-resize;
   }

8.  配置table组件

   <Table 
       columns={column} 
   	components={{
           header: {
               cell: ResizableTitle,
            }
       }} 
       dataSource={data} 
   />