clauderic / clauderic/dnd-kit

How to properly use the @tanstack/virtual with sortable

Open
#1,720 4 comments 2 reactions 0 assignees View on GitHub
dom experimental question react triage:done
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.