{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "table-drag-example",
  "title": "Table Drag",
  "description": "table-drag-example",
  "dependencies": [
    "@heroicons/react",
    "react-aria-components",
    "react-stately"
  ],
  "registryDependencies": [
    "https://intentui.com/r/table"
  ],
  "files": [
    {
      "path": "src/components/examples/collections/table/table-drag-example.tsx",
      "content": "'use client'\nimport { StarIcon } from '@heroicons/react/24/solid'\nimport { useDragAndDrop } from 'react-aria-components/useDragAndDrop'\nimport { useListData } from 'react-stately/useListData'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from '@/components/ui/table'\n\nexport default function TableDragDemo() {\n  const list = useListData({\n    initialItems: movies,\n  })\n\n  const { dragAndDropHooks } = useDragAndDrop({\n    getItems: (keys) =>\n      [...keys].map((key) => ({\n        'text/plain': list.getItem(key)?.name ?? '',\n      })),\n    onReorder(e) {\n      if (e.target.dropPosition === 'before') {\n        list.moveBefore(e.target.key, e.keys)\n      } else if (e.target.dropPosition === 'after') {\n        list.moveAfter(e.target.key, e.keys)\n      }\n    },\n  })\n  return (\n    <div className=\"rounded-lg border p-4\">\n      <Table aria-label=\"Movies\" selectionMode=\"multiple\" dragAndDropHooks={dragAndDropHooks}>\n        <TableHeader>\n          <TableColumn>#</TableColumn>\n          <TableColumn isRowHeader>Name</TableColumn>\n          <TableColumn>Genre</TableColumn>\n          <TableColumn>Release</TableColumn>\n          <TableColumn>Rating</TableColumn>\n        </TableHeader>\n        <TableBody items={list.items}>\n          {(item) => (\n            <TableRow>\n              <TableCell>{item.id}</TableCell>\n              <TableCell>{item.name}</TableCell>\n              <TableCell>{item.genre}</TableCell>\n              <TableCell>{item.releaseYear}</TableCell>\n              <TableCell>\n                <div className=\"flex items-center gap-x-2\">\n                  <StarIcon className=\"size-3.5 text-warning\" /> <span>{item.rating}</span>\n                </div>\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n    </div>\n  )\n}\n\nconst movies = [\n  {\n    id: '1',\n    name: 'The Matrix',\n    genre: 'Sci-Fi',\n    releaseYear: 1999,\n    director: 'Wachowskis',\n    rating: 8.7,\n  },\n  {\n    id: '2',\n    name: 'Inception',\n    genre: 'Sci-Fi',\n    releaseYear: 2010,\n    director: 'Christopher Nolan',\n    rating: 8.8,\n  },\n  {\n    id: '3',\n    name: 'The Godfather',\n    genre: 'Crime',\n    releaseYear: 1972,\n    director: 'Francis Ford Coppola',\n    rating: 9.2,\n  },\n  {\n    id: '4',\n    name: 'Pulp Fiction',\n    genre: 'Crime',\n    releaseYear: 1994,\n    director: 'Quentin Tarantino',\n    rating: 8.9,\n  },\n  {\n    id: '5',\n    name: 'The Dark Knight',\n    genre: 'Action',\n    releaseYear: 2008,\n    director: 'Christopher Nolan',\n    rating: 9.0,\n  },\n  {\n    id: '6',\n    name: 'Fight Club',\n    genre: 'Drama',\n    releaseYear: 1999,\n    director: 'David Fincher',\n    rating: 8.8,\n  },\n  {\n    id: '7',\n    name: 'Forrest Gump',\n    genre: 'Drama',\n    releaseYear: 1994,\n    director: 'Robert Zemeckis',\n    rating: 8.8,\n  },\n]\n",
      "type": "registry:page",
      "target": "app/table-drag-example/page.tsx"
    }
  ],
  "type": "registry:page"
}