{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "data-table-1",
  "type": "registry:component",
  "title": "DataTable 1",
  "description": "DataTable 1. A component for displaying and managing tabular data.",
  "dependencies": [],
  "registryDependencies": [
    "checkbox",
    "table"
  ],
  "files": [
    {
      "path": "components/watermelon/data-table-1.tsx",
      "type": "registry:component",
      "content": "'use client'\n\nimport { useMemo, useState } from 'react'\n\nimport { Checkbox } from '@/components/base-ui/checkbox'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/base-ui/table'\n\nexport type ProjectInvoice = {\n  amount: number\n  client: string\n  email: string\n  id: string\n  status: 'draft' | 'paid' | 'pending' | 'review'\n}\n\nconst data: readonly ProjectInvoice[] = [\n  {\n    id: 'INV-001',\n    client: 'North Studio',\n    amount: 1240,\n    status: 'paid',\n    email: 'billing@northstudio.co'\n  },\n  {\n    id: 'INV-002',\n    client: 'Atlas Works',\n    amount: 540,\n    status: 'review',\n    email: 'accounts@atlasworks.io'\n  },\n  {\n    id: 'INV-003',\n    client: 'Paper Trail',\n    amount: 920,\n    status: 'pending',\n    email: 'hello@papertrail.design'\n  },\n  {\n    id: 'INV-004',\n    client: 'Luma Team',\n    amount: 1580,\n    status: 'paid',\n    email: 'finance@luma.team'\n  },\n  {\n    id: 'INV-005',\n    client: 'Mono Labs',\n    amount: 310,\n    status: 'draft',\n    email: 'ops@monolabs.dev'\n  }\n] as const\n\nconst formatCurrency = (amount: number) =>\n  new Intl.NumberFormat('en-US', {\n    style: 'currency',\n    currency: 'USD'\n  }).format(amount)\n\nconst DataTable1 = () => {\n  const [selectedIds, setSelectedIds] = useState<string[]>([])\n\n  const allSelected = selectedIds.length === data.length\n  const someSelected = selectedIds.length > 0 && !allSelected\n\n  const selectedIdSet = useMemo(() => new Set(selectedIds), [selectedIds])\n\n  const toggleAll = (checked: boolean) => {\n    setSelectedIds(checked ? data.map((item) => item.id) : [])\n  }\n\n  const toggleRow = (id: string, checked: boolean) => {\n    setSelectedIds((current) => {\n      if (checked) {\n        return current.includes(id) ? current : [...current, id]\n      }\n\n      return current.filter((item) => item !== id)\n    })\n  }\n\n  return (\n    <div className='w-60 sm:w-100 md:w-120 lg:w-160 2xl:w-220 mx-auto'>\n      <div className='w-60 sm:w-100 md:w-120 lg:w-160 2xl:w-220 rounded-lg border border-border/60 bg-background overflow-x-auto'>\n        <Table className='w-60 sm:w-100 md:w-120 lg:w-160 2xl:w-220'>\n          <TableHeader>\n            <TableRow>\n              <TableHead className='h-11 w-10 bg-muted/20 font-medium'>\n                <Checkbox\n                  checked={allSelected}\n                  aria-checked={someSelected ? 'mixed' : allSelected}\n                  onCheckedChange={(value) => toggleAll(!!value)}\n                  aria-label='Select all'\n                  className='after:hidden data-checked:border-sky-600 data-checked:bg-sky-600 data-checked:text-white dark:data-checked:border-sky-500 dark:data-checked:bg-sky-500 dark:data-checked:text-white'\n                />\n              </TableHead>\n              <TableHead className='h-11 bg-muted/20 font-medium'>Client</TableHead>\n              <TableHead className='h-11 bg-muted/20 font-medium'>Status</TableHead>\n              <TableHead className='h-11 bg-muted/20 font-medium'>Email</TableHead>\n              <TableHead className='h-11 bg-muted/20 text-right font-medium'>Amount</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {data.map((row) => {\n              const isSelected = selectedIdSet.has(row.id)\n\n              return (\n                <TableRow\n                  key={row.id}\n                  data-state={isSelected ? 'selected' : undefined}\n                  className='transition-colors hover:bg-muted/10'\n                >\n                  <TableCell className='py-3'>\n                    <Checkbox\n                      checked={isSelected}\n                      onCheckedChange={(value) => toggleRow(row.id, !!value)}\n                      aria-label={`Select ${row.client}`}\n                      className='after:hidden data-checked:border-sky-600 data-checked:bg-sky-600 data-checked:text-white dark:data-checked:border-sky-500 dark:data-checked:bg-sky-500 dark:data-checked:text-white'\n                    />\n                  </TableCell>\n                  <TableCell className='py-3'>\n                    <div className='font-medium'>{row.client}</div>\n                  </TableCell>\n                  <TableCell className='py-3'>\n                    <div className='capitalize text-sm text-muted-foreground'>{row.status}</div>\n                  </TableCell>\n                  <TableCell className='py-3'>\n                    <div className='text-sm text-muted-foreground'>{row.email}</div>\n                  </TableCell>\n                  <TableCell className='py-3'>\n                    <div className='text-right font-medium'>{formatCurrency(row.amount)}</div>\n                  </TableCell>\n                </TableRow>\n              )\n            })}\n          </TableBody>\n        </Table>\n      </div>\n    </div>\n  )\n}\n\nexport default DataTable1\n"
    }
  ]
}