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

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


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