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
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));
}
}
};
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With