reactjs - 具有可调整大小的列和拖放列的 Ant Design Table 示例?

标签 reactjs antd

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

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

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

我尝试用 react-resizable 来实现它对于可调整大小的列和 react-sortable-hocreact-drag-listview用于拖放列顺序。

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

Uncaught TypeError: target.parentNode

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

TIA

最佳答案

使用文档中的 antd 表可调整大小的列代码启动它,然后您可以集成 react-drag-listview使列可拖动的库。有了这些,您就可以实现一个可调整大小的列,同时可以通过拖放进行排序。请参阅以下链接以供引用。

Table column drag and drop sortable and resizable

关于reactjs - 具有可调整大小的列和拖放列的 Ant Design Table 示例?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63744244/

相关文章:

html - Ant Design Table 扩展改变 CSS 类 | react

reactjs - 有没有办法虚拟化(例如使用react-window)antd嵌套表?

reactjs - 如何禁用 Antd 表中的行

javascript - 在 React 中使用样式化组件时状态不会改变

javascript - 创建通用自定义组件 React

reactjs - 如何在组件之外获取RTK查询数据?

ios - "Unhandled JS Exception: TypeError"

javascript - 在 redux 操作中使用 socketio

javascript - Ant 设计表单initialValue如何使用

javascript - Antd表: How to render table with object in list