Is there a built-in sorting strategy for virtualized grids in @dnd-kit/sortable?

[kombucha]

Hi 👋

I'm currently using react-sortable-hoc and I'm evaluating how we could migrate to dnd-kit instead.
In my application, I have a virtualized, sortable, grid of items which is powered by react-sortable-hoc and react-virtual (I'm actually virtualizing pre-chunked "rows of items", so no virtualization in the x axis).

I checked the docs (notably sorting strategies) and the examples storybook and unless I'm mistaken virtualized grids don't seem to be supported out of the box.

Did I miss anything? If not, would you have some pointers on how this could be implemented in userland?

Thank you!

[clauderic]

That's right, virtualized grids aren't currently supported by any of the sorting strategies. It's been a while since I looked at this, but I believe the rectSortingStrategy strategy needs all elements to be mounted to work properly.

Having said that, you could fairly easily look at the source code of react-sortable-hoc's grid sorting logic and port it over as a custom sorting strategy for @dnd-kit:

https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableContainer/index.js#L711-L788

This isn't a feature I need so I won't be prioritizing it myself for the time being. Would happily accept a PR request for @dnd-kit if anyone tackles this.

[michaeled]

Hey @clauderic,

Do you know if this feature is still in the backlog? If so, I'm happy to assist with the development and send a PR.

[tomasmenezes]

@clauderic @michaeled Would definitely appreciate support for this feature

[hsavit1]

@michaeled any updates ?

[hsavit1]

@clauderic will the new dnd kit implementation support this feature?

[bnjmnt4n]

Actually, I have a virtualized grid implementation which works pretty well with @dnd-kit/sortable. I'm using rectSortingStrategy, and there doesn't seem to be any issues even without all the items being rendered. The only thing I had to do was to ensure that the item currently being dragged was rendered even when it's outside of the visible range. The code is using both a DragOverlay and including the item as a sortable, and perhaps the only issue is that if a currently dragged item is outside of the visible range per the virtualization, and the drag is cancelled, the DragOverlay cannot perform a transition since the rendered dragged item will no longer be rendered when there is no active drag.

This can probably be worked around by adding a timeout equivalent to the transition duration to ensure that the sortable item is visible until the DragOverlay animates back, but I wanted to see if there are any other issues/suggestions with this implementation. In particular, are there any issues @clauderic had perhaps noted in the past, which required specific handling?

[taiwanhua]

@bnjmnt4n Hi, May I see your code about virtualized grid implementation?
I am struggling with this,
need help~~

[taiwanhua]

In the end I had to add pagination to let the browser render only part of the item

[jonathanrstern]

Any updates on this?

I'm using rectSortingStrategy and haven't figured out a virtualized grid implementation.

@bnjmnt4n