具有可调整大小的列和拖放列的 Ant Design Table 示例？答案

【问题标题】：Example of Ant Design Table with both resizable columns and drag and drop columns?具有可调整大小的列和拖放列的 Ant Design Table 示例？
【发布时间】：2020-09-04 15:42:16
【问题描述】：

我正在尝试在Ant Design's Table component 中实现可调整大小和拖放列。

我让两者都独立工作，但不能让它们同时工作而没有错误或错误。我需要能够拖动列边框并水平调整其大小，还需要能够单击列标题并拖放它。

我正在寻找与此表的功能类似的这些功能： https://www.ag-grid.com/example.php

我已经尝试使用react-resizable 来实现可调整大小的列，并使用react-sortable-hoc 和react-drag-listview 来实现拖放列顺序。

使用 react-drag-listview 的最新问题是我必须在使用另一个功能时禁用一个功能，而在 Firefox 中，这会导致错误：

未捕获的类型错误：target.parentNode

我找不到任何将这两个功能与 Ant D 表一起使用的示例，但我确信它们必须可以同时工作。

TIA

【问题讨论】：

标签： reactjs antd

【解决方案1】：

从文档中的 antd table 可调整大小的列代码开始，然后您可以集成 react-drag-listview 库以使列可拖动。有了这些，您可以实现可调整大小的列，同时可以通过拖放进行排序。请参阅下面的链接以供参考。

Table column drag and drop sortable and resizable

【讨论】：

谢谢，感谢一个很好的例子，我在其他任何地方都找不到！
经过更多的尝试，虽然它是一个解决方案，但它存在问题。在您的示例中，转到“性别”列并调整其大小，使其尽可能大，并且鼠标直接位于“年龄”上方。然后向上提起鼠标键。用鼠标单击年龄以选择它并拖动它。当您拖动时，您会看到它没有拖动列标题单元格，而只是拖动文本。
我试过你说的（我也在全窗口试过）但它对我有用..也许你可以问另一个关于这个的问题，还包括一些正在发生的事情的 gif 图像演示我和其他人可以调试它。谢谢！
好的，谢谢，我会这样做，因为这会很好解决。当您提供一个工作示例时，我将把问题标记为答案。
谢谢！快乐编码:)