Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Table Block Drag Drop Reorder
Table component with drag-and-drop row reordering and visual drop indicators for React list management
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Reorder table rows on your Next.js dashboard with this drag-and-drop table component. Features grab handle for each row, visual drag preview with opacity change, drop zone indicator between rows, smooth reorder animation, and updated position tracking in state. Built with shadcn/ui Table and Button components using Tailwind CSS and native HTML5 drag events. The intuitive reordering enables manual prioritization—perfect for task prioritization, playlist ordering, queue management, or any React app with user-controlled item sequencing.
8 items in queue. Drag to reorder priority.
Drop position updates automatically
| # | Title | Type | Priority | Assignee | Est. | |
|---|---|---|---|---|---|---|
| 1 | Implement user authentication | Feature | High | Sarah Chen | 3d | |
| 2 | Fix login redirect loop | Bug | High | Alex Kim | 4h | |
| 3 | Add dark mode support | Feature | Medium | Jordan Lee | 2d | |
| 4 | Optimize database queries | Improvement | Medium | Taylor Smith | 1d | |
| 5 | Write API documentation | Task | Low | Morgan Davis | 6h | |
| 6 | Update dependencies | Task | Low | Casey Wilson | 2h | |
| 7 | Add email notifications | Feature | Medium | Riley Brown | 1d | |
| 8 | Fix mobile layout issues | Bug | High | Jamie Garcia | 4h |
Installation
Related blocks you will also like
Table with Row Selection
Select before reordering
Task Table with Actions
Actions on reordered rows
Table with Sortable Columns
Sort vs manual reorder
Table with Grouped Rows
Reorder within groups
Table with Inline Editing
Edit reordered items
Table with Quick Filters
Filter then reorder