Shadcn.io is not affiliated with official shadcn/ui
React Table Block Column Reorder
Table component with draggable column headers for custom column ordering in React data grids
Customize data views on your Next.js dashboard with this column reorder table component. Features drag-and-drop column headers, visual drop indicators during drag, persistent column order state, reset to default button, and smooth reorder animations. Built with shadcn/ui Table and Button components using Tailwind CSS and HTML5 drag events. The personalized layout improves workflow efficiency—perfect for CRM dashboards, analytics tables, report builders, data grids, or any React app where users need custom column arrangements.
React Table Block Column Reorder preview
Installation
Related Components
Table with Column Visibility
Show and hide columns
Table with Resizable Columns
Adjust column widths
Table with Sortable Columns
Sort by columns
Table with Pinned Columns
Freeze columns
Table with Drag and Drop
Reorder rows
Table with Density Toggle
Adjust row spacing