Shadcn.io is not affiliated with official shadcn/ui
Tables Column Reorder
Data table with drag-and-drop column reordering for React and Next.js apps using shadcn/ui, Tailwind CSS, and TypeScript
Scroll to load preview
Customize table layouts with this draggable column component. Features drag-and-drop column headers with grip icons, visual drop indicators, persistent state management, and reset to default button. Built with shadcn/ui Table and Button components using HTML5 drag events. Perfect for CRM dashboards, analytics tables, and customizable data grids.
Related Components
Table with Column Visibility
undefined
Table with Resizable Columns
undefined
Table with Sortable Columns
undefined
Table with Pinned Columns
undefined
Table with Drag and Drop
undefined
Table with Density Toggle
undefined
FAQ
Last updated on March 24, 2026
Was this page helpful?
Sign in to leave feedback.