React Ant-Table Resizable 实现对Table表格的列的宽度调整

import React from "react";
import { Widget } from "erpcore";
import { Table } from 'antd';
import "./index.less";
import { Resizable } from 'react-resizable';
import 'react-resizable/css/styles.css';


const WidgetOfBase = Widget.WidgetOfBase;
const ResizeableTitle = (props) => {
    const { onResize, width, ...restProps } = props;
    if (!width) {
        return <th {...restProps} />
    }
    return (
        <Resizable
            width={width} height={0} onResize={onResize}>
            <th {...restProps} />
        </ Resizable >
    )
};

class ReactTable extends WidgetOfBase {
    constructor(props) {
        super(props);
        this.state.columns = props.rcColumns;
    };

    components = {
        header: {
            cell: ResizeableTitle,
        },
    };

    handleResize = index => (e, { size }) => {
        const { tableKey } = this.props;
        this.setState(({ columns }) => {
            const nextColumns = [...columns];
            nextColumns[index] = {
                ...nextColumns[index],
                // width: (size.width < 50) ? 50 : size.width,
                width: size.width,
            };
            console.log(nextColumns)
            if (tableKey) {
                localStorage.setItem(tableKey, JSON.stringify(nextColumns))
            }

            return { columns: nextColumns };
        });
    };

    renderOnMobile = () => {
        const { dataSource, pagination, selectedRowKeys, onSelectChange } = this.props;
        const columns = this.state.columns.map((col, index) => ({
            ...col,
            onHeaderCell: (column) => ({
                width: column.width,
                onResize: this.handleResize(index),
            }),
        }));
        const rowSelection = {
            selectedRowKeys,
            onChange: onSelectChange,
        };
        return (
            <div className="rc_table">
                <Table
                    columns={columns}
                    components={this.components}
                    dataSource={dataSource}
                    pagination={pagination}
                    size="middle"
                    rowSelection={rowSelection}
                    scroll={{ x: true }}
                />
            </div>
        )
    }
}

export default ReactTable;