Ant设计 - 如何通过拖动调整表格列宽？

Question

Is there any way to let users to adjust column width of Ant Design Table by drag and drop?

I found some examples that about is for column sorting, but not for column resizing.

Please help, thanks!

---

UPDATED @ 2018-11-13

There is an official example of resizing table column now:

https://ant.design/components/table/#components-table-demo-resizable-column

Answer 1

I have made a working sample - its far from perfect and needs a lot of optimization. Basically you need to use the onHeaderCell and capture onMouseDown , onMouseUp and onMouseMove .

onMouseMove we call setState and basically trigger a re-render with the new column width.

https://codesandbox.io/s/j2zw9nn5w9

onHeaderCell: column => {
  let colw = this.state.columnWidth;
  return {
    onMouseDown: e => {
      this.mouseDownX = e.clientX;
      this.beginDrag = true;
    },
    onMouseUp: () => {
      this.beginDrag = false;
    },
    onMouseMove: e => {
      if(this.beginDrag === true) {
        this.updateColumnWidth(colw + 
        Math.round((e.clientX - this.mouseDownX)*.05));
      }
    }
  };
}