{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table-10",
  "title": "Sticky header table",
  "description": "The header stays in place while the rows scroll under it.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.ndekocode.dev/r/badge.json",
    "https://ui.ndekocode.dev/r/table.json",
    "https://ui.ndekocode.dev/r/theme.json"
  ],
  "files": [
    {
      "path": "registry/ndeko/components/table/table-10.tsx",
      "content": "import { Badge } from '@/registry/ndeko/ui/badge';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/ndeko/ui/table';\n\ntype Status = 'Active' | 'Inactive' | 'Pending';\n\ntype Account = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  status: Status;\n  balance: number;\n};\n\nconst STATUS_VARIANTS = {\n  Active: 'success',\n  Inactive: 'secondary',\n  Pending: 'warning',\n} as const;\n\nconst ACCOUNTS: Account[] = [\n  {\n    id: '1',\n    name: 'Jordan Hayes',\n    email: 'jordan.hayes@example.com',\n    location: 'Toronto, Canada',\n    status: 'Active',\n    balance: 1250,\n  },\n  {\n    id: '2',\n    name: 'Anna Novak',\n    email: 'anna.novak@example.com',\n    location: 'Prague, Czechia',\n    status: 'Active',\n    balance: 600,\n  },\n  {\n    id: '3',\n    name: 'Kenji Watanabe',\n    email: 'kenji.watanabe@example.com',\n    location: 'Osaka, Japan',\n    status: 'Inactive',\n    balance: 650,\n  },\n  {\n    id: '4',\n    name: 'Lina Haddad',\n    email: 'lina.haddad@example.com',\n    location: 'Lyon, France',\n    status: 'Active',\n    balance: 0,\n  },\n  {\n    id: '5',\n    name: 'Ama Mensah',\n    email: 'ama.mensah@example.com',\n    location: 'Accra, Ghana',\n    status: 'Pending',\n    balance: -1000,\n  },\n  {\n    id: '6',\n    name: 'Mateo Rossi',\n    email: 'mateo.rossi@example.com',\n    location: 'Turin, Italy',\n    status: 'Active',\n    balance: 1500,\n  },\n  {\n    id: '7',\n    name: 'Priya Raman',\n    email: 'priya.raman@example.com',\n    location: 'Bengaluru, India',\n    status: 'Inactive',\n    balance: 200,\n  },\n  {\n    id: '8',\n    name: 'Lucas Meyer',\n    email: 'lucas.meyer@example.com',\n    location: 'Hamburg, Germany',\n    status: 'Active',\n    balance: 1000,\n  },\n  {\n    id: '9',\n    name: 'Sofia Lindqvist',\n    email: 'sofia.lindqvist@example.com',\n    location: 'Malmö, Sweden',\n    status: 'Active',\n    balance: 500,\n  },\n  {\n    id: '10',\n    name: 'Daniel Okafor',\n    email: 'daniel.okafor@example.com',\n    location: 'Lagos, Nigeria',\n    status: 'Inactive',\n    balance: 300,\n  },\n  {\n    id: '11',\n    name: 'Mei Lin',\n    email: 'mei.lin@example.com',\n    location: 'Taipei, Taiwan',\n    status: 'Active',\n    balance: 800,\n  },\n  {\n    id: '12',\n    name: 'Omar Farouk',\n    email: 'omar.farouk@example.com',\n    location: 'Cairo, Egypt',\n    status: 'Active',\n    balance: 1200,\n  },\n  {\n    id: '13',\n    name: 'Clara Duarte',\n    email: 'clara.duarte@example.com',\n    location: 'Porto, Portugal',\n    status: 'Pending',\n    balance: 400,\n  },\n  {\n    id: '14',\n    name: 'Noah Becker',\n    email: 'noah.becker@example.com',\n    location: 'Zurich, Switzerland',\n    status: 'Inactive',\n    balance: 600,\n  },\n  {\n    id: '15',\n    name: 'Hana Kim',\n    email: 'hana.kim@example.com',\n    location: 'Busan, South Korea',\n    status: 'Active',\n    balance: 1800,\n  },\n];\n\nconst CURRENCY = new Intl.NumberFormat('en-US', {\n  style: 'currency',\n  currency: 'USD',\n});\n\nconst SEPARATE_ROW_LINES = [\n  'border-separate border-spacing-0',\n  '[&_tr]:border-0 [&_th]:hairline-b [&_tr:not(:last-child)_td]:hairline-b [&_tfoot_td]:hairline-t',\n  '[&_td]:border-border [&_th]:border-border',\n].join(' ');\n\nfunction totalBalanceOf(accounts: Account[]) {\n  let total = 0;\n  for (const account of accounts) {\n    total += account.balance;\n  }\n  return total;\n}\n\nexport default function Table10() {\n  const totalBalance = totalBalanceOf(ACCOUNTS);\n\n  return (\n    <div className='w-full [&>div]:max-h-96'>\n      <Table className={SEPARATE_ROW_LINES}>\n        <TableHeader className='bg-card/90 sticky top-0 z-10 backdrop-blur-xs'>\n          <TableRow className='hover:bg-transparent'>\n            <TableHead>Name</TableHead>\n            <TableHead>Email</TableHead>\n            <TableHead>Location</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead className='text-right'>Balance</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {ACCOUNTS.map((account) => (\n            <TableRow key={account.id}>\n              <TableCell className='font-medium'>{account.name}</TableCell>\n              <TableCell className='text-muted-foreground'>\n                {account.email}\n              </TableCell>\n              <TableCell>{account.location}</TableCell>\n              <TableCell>\n                <Badge variant={STATUS_VARIANTS[account.status]}>\n                  {account.status}\n                </Badge>\n              </TableCell>\n              <TableCell className='text-right tabular-nums'>\n                {CURRENCY.format(account.balance)}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n        <TableFooter>\n          <TableRow className='hover:bg-transparent'>\n            <TableCell colSpan={4}>Total</TableCell>\n            <TableCell className='text-right tabular-nums'>\n              {CURRENCY.format(totalBalance)}\n            </TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "components",
    "table"
  ],
  "type": "registry:component"
}