{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table-07",
  "title": "Selectable rows",
  "description": "Checkboxes select rows one by one or all at once.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.ndekocode.dev/r/badge.json",
    "https://ui.ndekocode.dev/r/checkbox.json",
    "https://ui.ndekocode.dev/r/table.json",
    "https://ui.ndekocode.dev/r/theme.json"
  ],
  "files": [
    {
      "path": "registry/ndeko/components/table/table-07.tsx",
      "content": "'use client';\n\nimport { useState } from 'react';\n\nimport { Badge } from '@/registry/ndeko/ui/badge';\nimport { Checkbox } from '@/registry/ndeko/ui/checkbox';\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\nconst ALL_IDS = ACCOUNTS.map((account) => account.id);\n\nconst CURRENCY = new Intl.NumberFormat('en-US', {\n  style: 'currency',\n  currency: 'USD',\n});\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\nfunction rowStateOf(isSelected: boolean) {\n  if (isSelected) {\n    return 'selected';\n  }\n  return undefined;\n}\n\nexport default function Table07() {\n  const [selectedIds, setSelectedIds] = useState<string[]>([]);\n  const totalBalance = totalBalanceOf(ACCOUNTS);\n  const selectedCount = selectedIds.length;\n  const isAllSelected = selectedCount === ACCOUNTS.length;\n  const hasSelection = selectedCount > 0;\n  const isPartlySelected = hasSelection && !isAllSelected;\n\n  function toggleAll(checked: boolean) {\n    if (checked) {\n      setSelectedIds(ALL_IDS);\n      return;\n    }\n    setSelectedIds([]);\n  }\n\n  function toggleOne(id: string, checked: boolean) {\n    setSelectedIds((current) => {\n      const others = current.filter((selectedId) => selectedId !== id);\n      if (checked) {\n        return [...others, id];\n      }\n      return others;\n    });\n  }\n\n  return (\n    <div className='w-full'>\n      <Table>\n        <TableHeader>\n          <TableRow className='hover:bg-transparent'>\n            <TableHead>\n              <Checkbox\n                checked={isAllSelected}\n                indeterminate={isPartlySelected}\n                onCheckedChange={toggleAll}\n                aria-label='Select all rows'\n              />\n            </TableHead>\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            const isSelected = selectedIds.includes(account.id);\n            return (\n              <TableRow key={account.id} data-state={rowStateOf(isSelected)}>\n                <TableCell>\n                  <Checkbox\n                    checked={isSelected}\n                    onCheckedChange={(checked) => {\n                      toggleOne(account.id, checked);\n                    }}\n                    aria-label={`Select ${account.name}`}\n                  />\n                </TableCell>\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          })}\n        </TableBody>\n        <TableFooter>\n          <TableRow className='hover:bg-transparent'>\n            <TableCell colSpan={5}>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"
}