{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "table-sorting-example",
  "title": "Table Sorting",
  "description": "table-sorting-example",
  "dependencies": [
    "@react-stately/data"
  ],
  "registryDependencies": [
    "https://intentui.com/r/loader",
    "https://intentui.com/r/table"
  ],
  "files": [
    {
      "path": "src/components/examples/collections/table/table-sorting-example.tsx",
      "content": "'use client'\nimport { useAsyncList } from '@react-stately/data'\nimport { Loader } from '@/components/ui/loader'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from '@/components/ui/table'\n\ninterface Character {\n  title: string\n  director: number\n  producer: number\n  release_date: number\n}\n\nexport default function TableSortingDemo() {\n  const list = useAsyncList<Character>({\n    async load({ signal }) {\n      const res = await fetch('https://swapi.py4e.com/api/films', {\n        signal,\n      })\n      const json = await res.json()\n      return {\n        items: json.results,\n      }\n    },\n    async sort({ items, sortDescriptor }) {\n      return {\n        items: items.sort((a, b) => {\n          // @ts-expect-error\n          const first = a[sortDescriptor.column]\n          // @ts-expect-error\n          const second = b[sortDescriptor.column]\n          let cmp = (Number.parseInt(first) || first) < (Number.parseInt(second) || second) ? -1 : 1\n          if (sortDescriptor.direction === 'descending') {\n            cmp *= -1\n          }\n          return cmp\n        }),\n      }\n    },\n  })\n  return (\n    <div className=\"rounded-lg border p-4\">\n      <Table aria-label=\"Movies\" sortDescriptor={list.sortDescriptor} onSortChange={list.sort}>\n        <TableHeader>\n          <TableColumn id=\"title\" isRowHeader>\n            Title\n          </TableColumn>\n          <TableColumn id=\"director\" allowsSorting>\n            Director\n          </TableColumn>\n          <TableColumn id=\"producer\">Producer</TableColumn>\n          <TableColumn id=\"release_date\" allowsSorting>\n            Release Date\n          </TableColumn>\n        </TableHeader>\n        <TableBody\n          items={list.items}\n          renderEmptyState={() => (\n            <div className=\"grid place-content-center p-10\">\n              <Loader />\n            </div>\n          )}\n        >\n          {(item) => (\n            <TableRow id={item.title}>\n              <TableCell className=\"whitespace-nowrap\">{item.title}</TableCell>\n              <TableCell className=\"whitespace-nowrap\">{item.director}</TableCell>\n              <TableCell className=\"whitespace-nowrap\">{item.producer}</TableCell>\n              <TableCell>{item.release_date}</TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/table-sorting-example/page.tsx"
    }
  ],
  "type": "registry:page"
}