Antデザイン-ドラッグしてテーブルの列幅を調整する方法は？

Question

ユーザーがドラッグアンドドロップで Ant Design Table の列幅を調整できるようにする方法はありますか？

については列の並べ替え用であり、列のサイズ変更用ではない例をいくつか見つけました。

助けてください、ありがとう！

---

更新@ 2018-11-13

現在、テーブル列のサイズ変更の公式例があります。

https://ant.design/components/table/#components-table-demo-resizable-column

Answer 1

私は実用的なサンプルを作成しました-完璧にはほど遠いため、多くの最適化が必要です。基本的に、onHeaderCellを使用し、onMouseDown、onMouseUp、およびonMouseMoveをキャプチャする必要があります。

onMouseMovesetStateを呼び出し、基本的に新しい列幅で再レンダリングをトリガーします。

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