Ant design - How to adjust table column width by dragging?

8
votes

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

1
javascriptreactjsdrag-and-dropantd
there is no inbuilt feature, you can take a look at drag-sorting feature and implement this -ant.design/components/table/#components-table-demo-drag-sorting - Aseem Gautam
@AseemGautam Thanks for your advice. Actually I am trying to implement the function based on this example now. However I still can't figure out the solution yet. - Neo Choi
I think you can make use of onHeaderCell and codepen.io/graham_saunders/pen/vrDxf example to make it work - Aseem Gautam

1 Answers

5
votes

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 Antd adjust table column width by dragging

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));
      }
    }
  };
}