search

hello-pangea / dnd

💅 Beautiful and accessible drag and drop for lists with React. ⭐️ Star to support our work!
https://dnd.hellopangea.com
Other
2.37k stars 92 forks source link

Support Virtual lists that don't use absolute position #423

Open genepaul opened 2 years ago

genepaul commented 2 years ago

Description

I have been using react-beautiful-dnd in a project that has a virtualized table. I was happy to see that this awesome library has been picked up for maintaining by someone, and I'm hoping a slight change can be made to the mode='virtual' droppable.

My virtualized table doesn't use absolute position to render the items in the windowed list, because they are table elements and absolute position doesn't play nicely with html tables. Unfortunately, the virtual mode of droppable appears to assume that items in the virtual list have been positioned according to their index in the list, and doesn't change the translate values when first dragging. I've tried to create a placeholder row to keep items shifted down, but the position calculations get messed up. I found the following lines that seem to be the culprit:

https://github.com/hello-pangea/dnd/blob/02daac951338d40127bc2e1b989b9116a989debc/src/view/draggable/connected-draggable.ts#L295-L300

In my case, removing a virtual item does cause the list to collapse. I'm curious if there's a prop we could add to disable this behavior for certain types of virtual lists? I hacked my node_modules by allowing me to pass a prop (I just called it nonAbsolute) that I can set to true, and in ConnectedDraggable I don't set isAfterCriticalInVirtualList to true if that's true:

https://github.com/hello-pangea/dnd/blob/02daac951338d40127bc2e1b989b9116a989debc/src/state/get-lift-effect.ts#L55

- inVirtualList: home.descriptor.mode === 'virtual',
+ inVirtualList: home.descriptor.mode === 'virtual' && !home.descriptor.nonAbsolute,

I did searches and it seemed to only affect that check, but I'm not sure if it'll have a ripple effect. I'm open to other ideas. Here's a codesandbox that illustrates the issue:

https://codesandbox.io/s/virtual-table-issue-6vns4h?file=/index.js

100terres commented 2 years ago

Hi @genepaul,

Thank you for opening an issue!

We would need to investigate this further. Could you provide a link to the virtualized table library you are using? :slightly_smiling_face:

One possible improvement could be to add a third mode to support virtualized libraries that do not use absolute positioning :thinking:

genepaul commented 2 years ago

Thanks for the response. I was actually using a home-rolled internal solution I can't link to, but I also tried to switch to react-virtuoso's table component: https://virtuoso.dev/hello-table/, and it has the same issue - really any component that tries to virtualize semantic HTML tables will have this problem, because tables don't play nicely with position absolute.

I like the idea of making it a specific mode as opposed to a different prop.

100terres commented 1 year ago

Hi @genepaul :wave:

Thank you for providing an example of a virtualize library using table :ok_hand:

It would help us a lot, if you could provide us a live CodeSandbox example of the issue using the TableVirtuoso component of react-virtuoso :slightly_smiling_face: