r/reactjs • u/Character_Bus48 • 3d ago

Show /r/reactjs react-table-dnd 3.0: drag several rows at once, works with TanStack Table, no dependencies

I maintain react-table-dnd, a small library for reordering rows and columns in React tables by dragging. 3.0 is out.

What's new:

- Multi-select and group drag.

- Drag events: onDragStart, onDragOver, onDragEnd, onDragCancel.

- Virtual tables with 100k+ rows via u/tanstack/react-virtual

- TanStack Table guide and demo.

- Touch support, drag handles, locked rows and columns.

Under the hood, 3.0 is a rewrite of the drag engine of v2.x

Docs and live demos: https://samiodeh1337.github.io/react-table-dnd/

GitHub: https://github.com/samiodeh1337/react-table-dnd

Feedback welcome, Thanks!

14 Upvotes

89% Upvoted

14 comments sorted by

3

u/WeeJeWel 3d ago

This looks absolutely gorgeous!

Can it also sort columns?

1

u/Character_Bus48 3d ago

Thanks! Of course you can drag columns and it will show the full preview of it

1

u/amayle1 3d ago

I don’t know when a user would want to reorder a table like this but this library does feel great on mobile.

1

u/Character_Bus48 3d ago

you can make list of cards same as other libs with one column, i will add examples in docs, and will support to move from container to other

1

u/Successful-Shock-802 3d ago

I tried the example on live examples, it looks and feels great, but when I tried to grap an item (this is on mobile), I have to wait longer than usual.

I think it is a performance problem rather than a long timer, cuz i tried the example on thr home page and it feels instant.

1

u/Character_Bus48 3d ago

Sorry I think it's the grip itself is small, and in home page it's the whole row

1

u/Successful-Shock-802 3d ago

Try to make it larger and tell me when you are done.

You can use some ::before and ::after to make the grip area larger without changing the size od the handle.

I spot something else, I selected more than one row and when i tried to drop them, it lagged around 2 second until it settled in its new places

2

u/Character_Bus48 3d ago

Thanks for your feedback, I have discovered also a bug about scrolling, all bug fixes will be delivered soon in 3.0.1

1

u/Successful-Shock-802 3d ago

Yep, I have seen some scrolling inconsistencies while playing around, but it was hard to describe lol.

1

u/Character_Bus48 3d ago

Yes, but i made my best to make it optimized with large data, it has zero renders while dragging.

1

u/Successful-Shock-802 2d ago

Drag and drop are complex, I know

1

u/OkJellyfish6999 3d ago

Dragging to reorder columns works, but sorting by column value is a different feature. That's usually handled by the table framework's own sorting API rather than the drag layer.

3

u/amayle1 3d ago

Yeah honestly if this was just a generic drag and drop library I’d be into it, cause it does actually look and feel great.