{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "table-infinite-scroll-example",
  "title": "Table Infinite Scroll",
  "description": "table-infinite-scroll-example",
  "dependencies": [
    "react-aria-components",
    "react-stately"
  ],
  "registryDependencies": [
    "https://intentui.com/r/progress-circle",
    "https://intentui.com/r/table"
  ],
  "files": [
    {
      "path": "src/components/examples/collections/table/table-infinite-scroll-example.tsx",
      "content": "'use client'\nimport { Collection } from 'react-aria-components/Collection'\nimport { TableLoadMoreItem } from 'react-aria-components/Table'\nimport { useAsyncList } from 'react-stately/useAsyncList'\nimport { ProgressCircle } from '@/components/ui/progress-circle'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from '@/components/ui/table'\n\ninterface Character {\n  name: string\n  height: number\n  mass: number\n  birth_year: number\n  gender: string\n  eye_color: string\n  skin_color: string\n  hair_color: string\n}\n\nexport default function TableInfiniteScrollDemo() {\n  const list = useAsyncList<Character>({\n    async load({ signal, cursor }) {\n      if (cursor) {\n        cursor = cursor.replace(/^http:\\/\\//i, 'https://')\n      }\n\n      const res = await fetch(cursor || 'https://swapi.py4e.com/api/people', { signal })\n      const json = await res.json()\n\n      return {\n        items: json.results,\n        cursor: json.next,\n      }\n    },\n  })\n\n  return (\n    <div className=\"overflow-hidden rounded-lg border px-6\">\n      <Table\n        bleed\n        allowResize\n        aria-label=\"People\"\n        className=\"h-72 [--gutter:--spacing(6)] sm:[--gutter:--spacing(8)]\"\n      >\n        <TableHeader className=\"sticky top-0 z-10 bg-muted\">\n          <TableColumn isRowHeader>Name</TableColumn>\n          <TableColumn>Height</TableColumn>\n          <TableColumn>Mass</TableColumn>\n          <TableColumn>Birth year</TableColumn>\n          <TableColumn>Gender</TableColumn>\n          <TableColumn>Eye</TableColumn>\n        </TableHeader>\n        <TableBody\n          renderEmptyState={() => (\n            <div className=\"flex h-full items-center justify-center p-4 text-muted-fg\">\n              No characters found.\n            </div>\n          )}\n        >\n          <Collection items={list.items}>\n            {(item) => (\n              <TableRow id={item.name}>\n                <TableCell>{item.name}</TableCell>\n                <TableCell>{item.height}</TableCell>\n                <TableCell>{item.mass}</TableCell>\n                <TableCell>{item.birth_year}</TableCell>\n                <TableCell>{item.gender}</TableCell>\n                <TableCell>{item.eye_color}</TableCell>\n              </TableRow>\n            )}\n          </Collection>\n          <TableLoadMoreItem\n            className=\"sticky inset-x-0 bottom-0 h-16\"\n            onLoadMore={list.loadMore}\n            isLoading={list.loadingState === 'loadingMore'}\n          >\n            <ProgressCircle className=\"mx-auto\" isIndeterminate aria-label=\"Loading more...\" />\n          </TableLoadMoreItem>\n        </TableBody>\n      </Table>\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/table-infinite-scroll-example/page.tsx"
    }
  ],
  "type": "registry:page"
}