docs(Table): add drag and drop rows example with useSortable integration

[stijns96]

🔗 Linked issue

Not sure which one to target here as some of them are for V2.

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Add a drag and drop example for the Table component

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@3700

commit: c48c610

[benjamincanac]

Just a random question, is Sortable the most used dnd library in Vue nowadays? I like the fact that there is a VueUse wrapper but I also heard about https://drag-and-drop.formkit.com/ (never tried it though).

[benjamincanac]

There is also https://github.com/Alfred-Skyblue/vue-draggable-plus which implies that SortableJS doesn't have good support for Vue3. Again, I'm just wondering here if sortable is the best library to demonstrate in our examples.

[stijns96]

Good question. I know I tried to find better packages for quite some time (some time ago), but haven't checked these.

Is it my phone or is https://drag-and-drop.formkit.com/ really slow and laggy?

I'll check it out!

[benjamincanac]

There is a React example of drag and drop for TanStack Table that uses @dnd-kit/sortable but not sure there is an equivalent for Vue. https://tanstack.com/table/v8/docs/framework/react/examples/row-dnd

[stijns96]

Mhh, looks like they are actively working on making it work for other languages as well.

clauderic/dnd-kit#1194 (comment)

I'll have a better look tomorrow on my laptop. Dnd looks super promising, but I don't think there is much left then the 2 packages you shared. Additionally, all of the examples comes down to the same implementation, but from another import.

[stijns96]

Alright, so...

Drag & Drop Libraries

• dnd-kit
  Looks really nice, but no Vue support at the moment. This has been an open issue since 2023.
  See: #1221, #1194

• VueDraggablePlus

  • 📦 92,546 weekly installs
  • 🛠 Last update 4 months ago
  • Claims to solve the same pain points as VueUse (docs)
  • Allows adding any ref to make a list sortable
  • ✅ Supports dual lists (unlike VueUse, which only supports single lists)
  • ✅ Nesting support available

• FormKit Drag & Drop

  • 📦 41,353 weekly downloads
  • 🛠 Last update 12 days ago
  • Similar to VueDraggablePlus
  • ✅ Multi drag support available
  • Nesting support unclear
  • ⚠️ Feels laggy on mobile, though this could be due to the demo/hero implementation

I'll leave it up to you @benjamincanac to determine what you'd like to have as main library for examples.