React-beautiful-dnd: Drag and Drop doesn't work with pagination with version 11.

[Shravan89131]

Hi, I have intigrated the react beautiful dnd with ReactTable by overriding the Tr and Tbody component of RectTable. The drag and Drop works fine on the first page as soon as i go to next page the drag and drop does't works as expected.

Issue: In the next page when i drag and drop the source index is correct but the destination index is wrong.

Let us assume i have 20 list of data, In the first page i am displaying 10 list and the drag and drop is working as expected and in the second page i am showing remaining 10 i.e. from 11-20. Here if i try to drag and drop 12th row with the 11th row my sorurce_index should be 11 and destination index should be 10.


 But here my source index is 11 and the destination index is 0.


 I was using react-beautiful-dnd version 11 and 10 but it didn't work as i reinstalled to version 9.0.2 it is working fine.

[bitcot]

I am facing the same issue in that latest version 11.0, drag and drop doesn't work in the subsequent pages. Destination index start from zero.

[alexreardon]

Hi there!

Thanks for raising this issue. Can you please create a standalone example on codesandbox.io using our boilerplate: https://codesandbox.io/s/k260nyxq9v

Without a standalone example, we will not be able to action this one

Cheers!

[bitcot]

here is the code https://codesandbox.io/s/649w5w3rjz using version 10.1.1. I tried to integrate drag & drop with react table but the subsequent pages destination index on drop start from 0.

Note: All the version below 10.0.0 works fine.

[alexreardon]

It looks like there is something strange going on even with 10.x https://codesandbox.io/s/vq3pkk2ony

[alexreardon]

Which makes me suspect there is a setup issue

[alexreardon]

Here you go: https://codesandbox.io/s/vq3pkk2ony

Have a read here: https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/draggable.md#required-props

index: A required number that matches the order of the in the . It is simply the index of the in the list. The index needs to be unique within a but does not need to be unique between Droppables. The indexs in a list must start from 0 and be consecutive. [0, 1, 2] and not [1, 2, 8].

On your subsequent pages you are using index from rowInfo - which does not start at 0. It is the raw index. You should use viewIndex which is relevant to the current table view

[Shravan89131]

Here you go: https://codesandbox.io/s/vq3pkk2ony

Have a read here: https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/draggable.md#required-props

index: A required number that matches the order of the in the . It is simply the index of the in the list. The index needs to be unique within a but does not need to be unique between Droppables. The indexs in a list must start from 0 and be consecutive. [0, 1, 2] and not [1, 2, 8].

On your subsequent pages you are using index from rowInfo - which does not start at 0. It is the raw index. You should use viewIndex which is relevant to the current table view

Hi @alexreardon ,
I have checked it using viewIndex. And also in the example which you have provided,
https://codesandbox.io/s/vq3pkk2ony the sort is still not working.

[alexreardon]

The reorder function looks like it is not working correctly (user code), but the drag and drop operation seems to be working visually

[SushanRajShakya]

@Shravan89131
It worked for me using viewIndex, like @alexreardon mentioned. I had to change the re-order function for it to work with the viewIndex and react-table pagination.