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