import React, { useState } from 'react'; import type { ResizeCallbackData } from 'react-resizable'; import { Resizable } from 'react-resizable'; import { Table } from 'antd'; import type { ColumnsType } from 'antd/es/table'; interface DataType { key: React.Key; date: string; amount: number; type: string; note: string; } const ResizableTitle = ( props: React.HTMLAttributes & { onResize: (e: React.SyntheticEvent, data: ResizeCallbackData) => void; width: number; }, ) => { const { onResize, width, ...restProps } = props; if (!width) { return ; } return ( { e.stopPropagation(); }} /> } onResize={onResize} draggableOpts={{ enableUserSelectHack: false }} > ); }; const App: React.FC = () => { const [columns, setColumns] = useState>([ { 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: () => Delete, }, ]); const data: DataType[] = [ { 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 handleResize: Function = (index: number) => (_: React.SyntheticEvent, { size }: ResizeCallbackData) => { const newColumns = [...columns]; newColumns[index] = { ...newColumns[index], width: size.width, }; setColumns(newColumns); }; const mergeColumns: ColumnsType = columns.map((col, index) => ({ ...col, onHeaderCell: (column: ColumnsType[number]) => ({ width: column.width, onResize: handleResize(index) as React.ReactEventHandler, }), })); return ( ); }; export default App;