Example of Ant Design Table with both resizable columns and drag and drop columns?

1
votes

I am trying to implement both resizable and drag and drop columns in Ant Design's Table component.

I have got both working independently but cannot make them work without errors or bugs at the same time. I need to be able to drag on a column border and resize it horizontally and also be able to click on a the column header and drag and drop it.

I am looking for these functionalities to be similar to the features of this table: https://www.ag-grid.com/example.php

I have tried implementing it with react-resizable for resizable columns and both react-sortable-hoc and react-drag-listview for drag and dropping column order.

With the react-drag-listview the latest problem is that I must disable one feature when using the other, and in Firefox, this results in the error:

Uncaught TypeError: target.parentNode

I can't find any examples of both of these features being used together with the Ant D table but I'm sure it must be possible to make them work simultaneously.

TIA

1
reactjsantd

1 Answers

3
votes

Start it with antd table resizable column codes from documentation then you can integrate the react-drag-listview library to make the columns draggable. With these, you can achieved a resizable columns at the same time can be sort by drag and drop. See below link for reference.

Table column drag and drop sortable and resizable