antd表头拖拽列宽

import { useEffect, useState } from 'react'
import { type TableColumnType, Table } from 'antd'
import { Resizable } from 'react-resizable'
import './style.less'

const defaultColumns: TableColumnType<any>[] = [
  {
    title: 'Date',
    dataIndex: 'date',
    width: 200,
  },
  {
    title: 'Amount',
    dataIndex: 'amount',
    width: 100,
    sorter: (a, b) => a.amount - b.amount,
  },
  {
    title: 'Type',
    dataIndex: 'type',
    width: 100,
  },
  {
    title: 'Note',
    dataIndex: 'note',
    // width: 100,
  },
  {
    title: 'Action',
    key: 'action',
    render: () => <a>Delete</a>,
  },
]

const ResizableTitle = ({ width, onResize, ...rest }) => {
  if (!width) {
    return <th {...rest} />
  }

  return (
    <Resizable
      width={width}
      height={0}
      handle={
        <span
          className='react-resizable-handle'
          onClick={(e) => {
            e.stopPropagation()
          }}
        />
      }
      onResize={onResize}
      draggableOpts={{ enableUserSelectHack: false }}
    >
      <th {...rest} />
    </Resizable>
  )
}

const App = () => {
  const [dataSource, setDataSource] = useState<any[]>([])
  const [columns, setColumns] = useState<TableColumnType<any>[]>(defaultColumns)

  const handleResize =
    (index: number) =>
    (_, { size }) => {
      console.log('_____', size)
      const newColumns = [...columns]
      newColumns[index] = {
        ...newColumns[index],
        width: size.width,
      }
      setColumns(newColumns)
    }

  useEffect(() => {
    setDataSource([
      {
        key: 0,
        date: '2018-02-11',
        amount: 120,
        type: 'income',
        note: 'transfer',
      },
      {
        key: 1,
        date: '2018-03-11',
        amount: 243,
        type: 'income',
        note: 'transfer',
      },
      {
        key: 2,
        date: '2018-04-11',
        amount: 98,
        type: 'income',
        note: 'transfer',
      },
    ])
  }, [])

  const finallyColumns = columns.map((col, index) => {
    return {
      ...col,
      onHeaderCell: (column) => ({
        width: column.width,
        onResize: handleResize(index),
      }),
    }
  })

  console.log('render')
  return (
    <>
      <Table
        size='small'
        // bordered
        columns={finallyColumns}
        dataSource={dataSource}
        components={{
          header: { cell: ResizableTitle },
        }}
      />
    </>
  )
}

export default App

css

.react-resizable {
  position: relative;
  background-clip: padding-box;
}

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