Table 表格头有排序以及 Resizable 时，拖拽缩放时 mouseup 将会触发 cell 的 sort

[KentonYu]

• [✔️] I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

拖拽表格头的大小，在表格头上释放鼠标，会触发 sort

What is expected?

拖拽释放鼠标 不会触发 sort

What is actually happening?

触发了 sort

Environment	Info
antd	undefined
React	16.x
System	mac
Browser	chrome latest

[zombieJ]

用 stopPropagation: https://codesandbox.io/s/1qnmpry8qj

Update the demo: https://codesandbox.io/s/zrj8xvyzxx

[AlwaysBeOk]

it is not work..

[zombieJ]

@AlwaysBeOk, thanks for notice. Update the demo. Pls check.

[AlwaysBeOk]

What is the principle？

[zombieJ]

What is the principle？

table use onClick to trigger sorter. The resize block is also a child node of th. So mark it when resizing and not trigger onClick.

[xiaoiver]

上面的例子中需要修改下这里：

if (!width) {
  // return <th {...restProps} />;
  return <th {...restProps} onClick={onClick} />;
}

否则会出现未设置 width 即不支持拖拽的列无法排序的现象（点击最后一列的排序）：
https://codesandbox.io/s/resizeabletable-de23n

[piyushk96]

Use stopPropagation: https://codesandbox.io/s/1qnmpry8qj

Update the demo: https://codesandbox.io/s/zrj8xvyzxx

@zombieJ
Can you please update the docs as many users are facing this issue. It would be great help for everyone.

[zombieJ]

done

[vaynevayne]

多谢, z-index 是多余的

.react-resizable-handle {
  position: absolute;
  top: 0px;
  bottom: 0px;
  height: 100%;
  width: 4px;
  border-right: 1px dashed rgb(44, 46, 51);
  cursor: col-resize;
}
.react-resizable-handle:hover {
  background-color: rgb(44, 46, 51);
}