{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table-12",
  "title": "Basic data table",
  "description": "A TanStack table with row selection and a balance total.",
  "dependencies": [
    "@tanstack/react-table"
  ],
  "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-12.tsx",
      "content": "'use client';\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\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 CURRENCY = new Intl.NumberFormat('en-US', {\n  style: 'currency',\n  currency: 'USD',\n});\n\nconst FIGURE_COLUMNS = new Set(['balance']);\n\nconst COLUMNS: ColumnDef<Account>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => (\n      <Checkbox\n        checked={table.getIsAllPageRowsSelected()}\n        indeterminate={table.getIsSomePageRowsSelected()}\n        onCheckedChange={(checked) => {\n          table.toggleAllPageRowsSelected(checked);\n        }}\n        aria-label='Select all rows'\n      />\n    ),\n    cell: ({ row }) => (\n      <Checkbox\n        checked={row.getIsSelected()}\n        onCheckedChange={(checked) => {\n          row.toggleSelected(checked);\n        }}\n        aria-label={`Select ${row.original.name}`}\n      />\n    ),\n  },\n  {\n    header: 'Name',\n    accessorKey: 'name',\n    cell: ({ row }) => <span className='font-medium'>{row.original.name}</span>,\n  },\n  {\n    header: 'Email',\n    accessorKey: 'email',\n    cell: ({ row }) => (\n      <span className='text-muted-foreground'>{row.original.email}</span>\n    ),\n  },\n  {\n    header: 'Location',\n    accessorKey: 'location',\n  },\n  {\n    header: 'Status',\n    accessorKey: 'status',\n    cell: ({ row }) => (\n      <Badge variant={STATUS_VARIANTS[row.original.status]}>\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    header: 'Balance',\n    accessorKey: 'balance',\n    cell: ({ row }) => CURRENCY.format(row.original.balance),\n  },\n];\n\nfunction alignClassOf(columnId: string) {\n  if (FIGURE_COLUMNS.has(columnId)) {\n    return 'text-right tabular-nums';\n  }\n  return undefined;\n}\n\nfunction rowStateOf(isSelected: boolean) {\n  if (isSelected) {\n    return 'selected';\n  }\n  return undefined;\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\nexport default function Table12() {\n  // eslint-disable-next-line react-hooks/incompatible-library -- TanStack Table v8 is required and cannot be memoized by the React Compiler.\n  const table = useReactTable({\n    data: ACCOUNTS,\n    columns: COLUMNS,\n    getCoreRowModel: getCoreRowModel(),\n  });\n  const rows = table.getRowModel().rows;\n  const totalBalance = totalBalanceOf(ACCOUNTS);\n  const labelColumnSpan = COLUMNS.length - 1;\n\n  return (\n    <div className='w-full'>\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow key={headerGroup.id} className='hover:bg-transparent'>\n              {headerGroup.headers.map((header) => (\n                <TableHead\n                  key={header.id}\n                  className={alignClassOf(header.column.id)}\n                >\n                  {!header.isPlaceholder &&\n                    flexRender(\n                      header.column.columnDef.header,\n                      header.getContext()\n                    )}\n                </TableHead>\n              ))}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {rows.map((row) => (\n            <TableRow key={row.id} data-state={rowStateOf(row.getIsSelected())}>\n              {row.getVisibleCells().map((cell) => (\n                <TableCell\n                  key={cell.id}\n                  className={alignClassOf(cell.column.id)}\n                >\n                  {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                </TableCell>\n              ))}\n            </TableRow>\n          ))}\n        </TableBody>\n        <TableFooter>\n          <TableRow className='hover:bg-transparent'>\n            <TableCell colSpan={labelColumnSpan}>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"
}