How to properly use the @tanstack/virtual with sortable
- Dominant language
- TypeScript
- Stars
- 17.6k
- Forks
- 924
- Avg merge
- 2d 10h
- Merged PRs (30d)
- 2
Description
I found the [example](https://github.com/clauderic/dnd-kit/blob/experimental/apps/stories/stories/react/Sortable/Virtualized/ReactVirtualExample.tsx) which uses the `useWindowVirtualizer()` — it the scrolling offset is set for the container. And I'm trying to apply a similar solution for the scrolling list of items using `useVirtualizer()` where each item positioned absolutely and moved with the `transformY()` inline style. And it seems that these styles conflict with the styles generated by the `@dnd-kit/react/sortable`.
Here is the [demo](https://stackblitz.com/edit/sortable-virtual-list?file=src%2FApp.tsx). Can you please help me understand what am I missing?
Thanks.
Contributor guide
Research direction
Start with apps/stories/stories/react/Sortable/Virtualized/ReactVirtualExample.tsx and compare its useWindowVirtualizer setup with the useVirtualizer approach in the linked StackBlitz demo's src/App.tsx. Trace how the virtualizer's absolute positioning and transformY styles interact with @dnd-kit/react/sortable styles. Done means the conflict is explained and a compatible sortable virtual-list approach is demonstrated.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 24/100