Hey r/reactjs, I wanted to share v2.0 of react-table-dnd, a lightweight library dedicated to reordering both rows and columns in tables. To keep performance steady during heavy drag operations, the drag engine runs entirely outside of React's standard render cycle.

Key Features:

• Dual Axis: Full support for reordering both rows and columns.
• External State Store: Uses useSyncExternalStore and a vanilla store to handle drag updates without triggering constant component re-renders.
• Direct DOM Updates: Drag animations are handled via requestAnimationFrame and native DOM mutations. If you are looking for a straightforward way to handle row and column dragging, feel free to check out the project or share any feedback.
• Live Demos: https://samiodeh1337.github.io/react-table-dnd/
• GitHub Repo: https://github.com/samiodeh1337/react-table-dnd

Hey r/reactjs,

I just released v2.0 of react-table-dnd. I originally built this because trying to drag both rows and columns inside a fully virtualized grid is usually a nightmare—most libraries either cause massive layout thrashing or the drop zones completely break when virtual columns unmount.

To fix this, I had to bypass React's render cycle almost entirely for the drag engine:

• O(1) updates: I ripped out React Context and moved to a vanilla store with useSyncExternalStore.
• Native cloning: Swapped React.cloneElement for native cloneNode(true).
• Direct DOM mutations: Drag movements happen outside React via style.transform in a requestAnimationFrame loop.
• O(1) Map caching: This tracks the DOM geometry.

I put together a docs site with interactive demos, specifically showing off the 2D virtualized grid:

• Docs & Demos: https://samiodeh1337.github.io/react-table-dnd/
• Repo: https://github.com/samiodeh1337/react-table-dnd

What's Next (Future Plans)

• Fully Headless API: Moving toward a completely headless architecture. Since the drag logic and state are already decoupled from the UI, the goal is to provide raw hooks and primitives so you can bring your own markup.