Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Table Block Column Reorder
Table component with draggable column headers for custom column ordering in React data grids
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
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.
Team Directory
Drag column headers to reorder
Name | Email | Department | Role | Location | Start Date |
|---|---|---|---|---|---|
| Sarah Chen | [email protected] | Engineering | Senior Developer | San Francisco | Mar 2021 |
| Marcus Johnson | [email protected] | Design | Lead Designer | New York | Jun 2020 |
| Emily Rodriguez | [email protected] | Marketing | Marketing Manager | Austin | Jan 2022 |
| David Kim | [email protected] | Engineering | DevOps Engineer | Seattle | Sep 2021 |
| Lisa Thompson | [email protected] | Sales | Account Executive | Chicago | Apr 2023 |
| James Wilson | [email protected] | Product | Product Manager | San Francisco | Nov 2020 |
Current order: Name → Email → Department → Role → Location → Start Date
6 employees
Installation
Related blocks you will also like
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