Block

Draggable Table

Full drag-and-drop row reordering with visual feedback and touch support

Installation

npx shadcn add @mylo-ui/table-draggable

Drag and drop rows using the handle to reorder tasks by priority.

Order	Order	Task	Priority	Status	Assignee
#1	1	Review Q4 reports	High	In Progress	John
#2	2	Update documentation	Medium	Pending	Sarah
#3	3	Fix critical bug	High	Pending	Mike
#4	4	Team meeting prep	Low	Pending	Emily
#5	5	Deploy to production	High	Pending	David

import { TableDraggable } from "@/components/blocks/table-draggable"

export default function Page() {
  return <TableDraggable />
}

lucide-react

@dnd-kit/core

@dnd-kit/sortable

@dnd-kit/utilities

table

More table blocks you might like

Clean, minimal table with basic data display

Alternating row colors with status badges

Grid-style table with visible borders