Search code examples
javascriptreactjsdrag-and-dropantd

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

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

Solution

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