Any chance of a V7 example with combined drag by column header or by row in same table

[madbiker88]

It seems react-table is going through a major upgrade V7 to V6 but there are precious few examples of V7 for dragging interactive elements. Most are for V6 and so not totally relevant giving either column or row drag but not both in same table. The current V7 examples do not yet show drag and drop.

Looking across react tables in general I find column sorting, or row sorting, but not both combined in same table, but it appears that react-table can do it. React beautiful DND makes a comment that they do not do column reorder, but react table has specific hooks built for column reorder.

The best example I have found for V7 dragging is from https://codesandbox.io/s/gargroh-v7-drag-column-beautiful-react-dnd-encww. This only does column drag, and I am trying to build another version with working rowdrag in same table as well.

There are other V6 versions that do row drag, but there is a little bit of special setup to doing row drag and column drag in the same table and I am not succeeding. Any chance of some assistance in providing a worked example in V7 react table.

My end goal is a excel like table with row drag reordering, column header drag reordering, plus cell editing to look rather like an Excel spreadsheet. I think it would be a great showcase of what react-table can do- ie. something that would aid adoption of react table.

I am working through to create it myself but I am new to both React and js. I will keep you posted if I succeed.

[vascomanpinto]

Did you succed?

[madbiker88]

Yes I did, my working example for reat-table row and column reorder combined is found at:
https://codesandbox.io/s/github/madbiker88/mb_react-table-v7-dnd

As you will see I have not yet got column reorder working with row resizing as well - hints are welcome

[richdotjs]

Have you figured out how to fix the column drag and drop? After further inspection, it looks like the HTML5 attribute for draggable is set to "false" when swapping columns from time to time. If you manually set it back to "true", it starts to work again. I'm still trying to figure out how to do this properly.