[Twenty-front]: Record table Header drag and drop functionality

[git-init-priyanshu]

Closes #21303

Screen.Recording.2026-06-08.at.1.53.04.PM.mov

[twenty-ci-bot-public]

👋 Thanks for contributing to Twenty!

Your PR has been set to draft while you work on it. Once you're done, mark it as Ready for review and our automated checks will run.

Looking forward to your contribution!

[cubic-dev-ai]

1 issue found across 8 files

<sub>Reply with feedback, questions, or to request a fix.

Re-trigger cubic</sub>

[twenty-ci-bot-public]

🔍 Automated Pre-Review

✅ No issues detected - This PR is ready for human review.

---

🧭 External PR Quality Review

🟠 Needs triage for the following reason(s):

• Does not follow Twenty technical standards (4 issue(s))

cc @prastoin

Checks

• ⏳ CI: pending
• 🔗 Linked issue: Closes #21303
• 📐 Standards: 4 issue(s)

Detailed findings (duplicate candidates, standards notes, summary) are in the workflow run logs.

---

View details

Automated pre-review — human approval still required.

[FelixMalfait]

Thanks! @Bonapara for design input

[Bonapara]

1. Keep displaying the column where it is to avoid the following behavior
2. It should be working wherever you release the column header
3. Display a border blue to indicate where the item will get released

Figma: https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=102422-209812&t=34rYRPPi1ZzuuW1k-11

Your implem:

CleanShot.2026-06-08.at.17.28.47.mp4

Columns no longer aligned with content:

[git-init-priyanshu]

Thanks @Bonapara for the design input. I will look into this and make changes.

[git-init-priyanshu]

@Bonapara a quick question: Do I need to use the dnd-kit library or I can achieve the same result using hello-pangea/dnd library because I have used hello-pangea/dnd here ? What do you recommend?

[Bonapara]

@git-init-priyanshu @hello-pangea/dnd is still used in older table/board record drag-and-drop flows, but for this new column header reordering I'd rather align with the sidebar implementation and use dnd-kit.

[git-init-priyanshu]

@git-init-priyanshu @hello-pangea/dnd is still used in older table/board record drag-and-drop flows, but for this new column header reordering I'd rather align with the sidebar implementation and use dnd-kit.

I figured. I was tinkering with @hello-pangea/dnd, but it doesn't seem possible to achieve that requirement, or at least not in an easy and reliable way. I'll make the changes and let you know. Thanks.