React antd table使用react-resizable实现伸缩列

首先声明注意点：

1、设置列宽的width一定要用number类型。

2、less中需要设置类的样式，如果无效，可以尝试加上:global(类名)

直接上demo。

index.jsx:  （展示组件）

import React from "react";
import ReactDOM from "react-dom";
import ResizeableTable from "./ResizeableTable";


const data = [
  {
    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 columns = [
  {
    title: "Date",
    dataIndex: "date",
    width: 200,
    sorter: (a, b) => a.date.length - b.date.length,
    sortDirections: ["descend"]
  },
  {
    title: "Amount",
    dataIndex: "amount",
    width: 100,
    sorter: (a, b) => {
      console.log("Amount sort");
      return a.amount - b.amount;
    },
    sortDirections: ["descend"]
  },
  {
    title: "Type",
    dataIndex: "type",
    width: 100
  },
  {
    title: "Note",
    dataIndex: "note",
    width: 100
  },
  {
    title: "Action",
    key: "action",
    render: () => <a href="javascript:;">Delete</a>
  }
];

class App extends React.PureComponent {
  render() {
    return (
      <div>
        <ResizeableTable
          columns={columns}
          dataSource={data}
        />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Resizeable.js   (排序和拖拽列功能的table组件)

import * as React from "react";
import { Table } from "antd";
import "antd/dist/antd.css";
import { Resizable } from "react-resizable";
import "./resizeable-table.less";

class ResizeableTitle extends React.Component {
  render() {
    const { onResize, width, onClick, ...restProps } = this.props;
    console.log({ ...restProps }, "!!!");

    if (!width) {
      return <th {...restProps} />;
    }
    return (
      <Resizable
        width={width}
        height={0}
        onResizeStart={() => (this.resizing = true)}
        onResizeStop={() => {
          setTimeout(() => {
            this.resizing = false;
          });
        }}
        onResize={onResize}
      >
        <th
          onClick={(...args) => {
            console.log(">>>", this.resizing);
            if (!this.resizing && onClick) {
              onClick(...args);
            }
          }}
          {...restProps}
        />
      </Resizable>
    );
  }
}

class ResizeableTable extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      columns: props.columns
    };
  }

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

  componentDidMount() {
    const handlers = document.querySelectorAll(
      ".react-resizable .react-resizable-handle"
    );
    console.log(handlers, "@@@");
    handlers.forEach((handler) =>
      handler.addEventListener("click", (e) => {
        console.log("e", e);
        return false;
      })
    );
  }

  render() {
    const columns = this.state.columns.map((col, index) => ({
      ...col,
      onHeaderCell: (column) => ({
        width: column.width,
        onResize: this.handleResize(index)
      })
    }));
    console.log(columns, "####");

    const components = Object.assign(
      {},
      this.props.components,
      this.components
    );

    return <Table {...this.props} columns={columns} components={components} />;
  }

  handleResize = (index) => (e, { size }) => {
    console.log("handleResize", e);
    e.stopImmediatePropagation();
    // e.preventDefault();
    this.setState(({ columns }) => {
      const nextColumns = [...columns];
      nextColumns[index] = {
        ...nextColumns[index],
        width: size.width
      };
      return { columns: nextColumns };
    });
  };
}

export default ResizeableTable;

resizeable-table.less   （拖拽列必须要设置的样式） 

.react-resizable {
  position: relative;
}

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