{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "data-table-2",
  "type": "registry:component",
  "title": "DataTable 2",
  "description": "DataTable 2. A component for displaying and managing tabular data.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "checkbox",
    "select",
    "table"
  ],
  "files": [
    {
      "path": "components/watermelon/data-table-2.tsx",
      "type": "registry:component",
      "content": "'use client'\n\nimport { useMemo, useState } from 'react'\n\nimport { Rows2Icon, Rows3Icon, Rows4Icon } from 'lucide-react'\n\nimport { Checkbox } from '@/components/base-ui/checkbox'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue\n} from '@/components/base-ui/select'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/base-ui/table'\n\nimport { cn } from '@/lib/utils'\n\ntype Density = 'compact' | 'flexible' | 'standard'\n\ntype InvoiceStatus = 'failed' | 'paid' | 'processing' | 'review'\n\ntype ClientInvoice = {\n  amount: number\n  email: string\n  id: string\n  name: string\n  status: InvoiceStatus\n}\n\ntype DensityOption = {\n  icon: typeof Rows2Icon\n  label: string\n  value: Density\n}\n\nconst densityOptions: readonly DensityOption[] = [\n  {\n    value: 'compact',\n    label: 'Compact',\n    icon: Rows4Icon\n  },\n  {\n    value: 'standard',\n    label: 'Standard',\n    icon: Rows3Icon\n  },\n  {\n    value: 'flexible',\n    label: 'Flexible',\n    icon: Rows2Icon\n  }\n] as const\n\nconst data: readonly ClientInvoice[] = [\n  {\n    id: 'INV-101',\n    name: 'Aurora Lab',\n    amount: 699,\n    status: 'paid',\n    email: 'billing@auroralab.co'\n  },\n  {\n    id: 'INV-102',\n    name: 'Northline Studio',\n    amount: 242,\n    status: 'paid',\n    email: 'hello@northline.studio'\n  },\n  {\n    id: 'INV-103',\n    name: 'Metric House',\n    amount: 655,\n    status: 'processing',\n    email: 'ops@metrichouse.io'\n  },\n  {\n    id: 'INV-104',\n    name: 'Olive Systems',\n    amount: 874,\n    status: 'review',\n    email: 'team@olivesystems.dev'\n  },\n  {\n    id: 'INV-105',\n    name: 'Canvas Union',\n    amount: 541,\n    status: 'failed',\n    email: 'accounts@canvasunion.com'\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 densityClasses: Record<Density, string> = {\n  compact: '[&_td]:py-2 [&_th]:py-2',\n  standard: '[&_td]:py-3 [&_th]:py-2.5',\n  flexible: '[&_td]:py-4 [&_th]:py-3'\n}\n\nconst DataTable2 = () => {\n  const [density, setDensity] = useState<Density>('standard')\n  const [selectedIds, setSelectedIds] = useState<string[]>([])\n\n  const selectedIdSet = useMemo(() => new Set(selectedIds), [selectedIds])\n  const allSelected = selectedIds.length === data.length\n  const someSelected = selectedIds.length > 0 && !allSelected\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='py-4'>\n        <Select value={density} onValueChange={(value) => setDensity(value as Density)}>\n          <SelectTrigger\n            className='w-full max-w-44 rounded-md border-border/60 bg-muted/20 shadow-none hover:bg-muted/30'\n            aria-label='Density select'\n          >\n            <SelectValue placeholder='Density' />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectLabel>Density</SelectLabel>\n              {densityOptions.map((option) => {\n                const Icon = option.icon\n\n                return (\n                  <SelectItem key={option.value} value={option.value}>\n                    <div className='flex items-center gap-2'>\n                      <Icon className='size-4 text-muted-foreground' />\n                      {option.label}\n                    </div>\n                  </SelectItem>\n                )\n              })}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n\n      <div className='overflow-hidden rounded-lg border border-border/60 bg-background'>\n        <Table\n          className={cn(\n            'mx-auto w-60 sm:w-100 md:w-120 lg:w-160 2xl:w-220',\n            densityClasses[density]\n          )}\n        >\n          <TableHeader>\n            <TableRow>\n              <TableHead className='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 invoices'\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='bg-muted/20 font-medium'>Name</TableHead>\n              <TableHead className='bg-muted/20 font-medium'>Status</TableHead>\n              <TableHead className='bg-muted/20 font-medium'>Email</TableHead>\n              <TableHead className='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>\n                    <Checkbox\n                      checked={isSelected}\n                      onCheckedChange={(value) => toggleRow(row.id, !!value)}\n                      aria-label={`Select ${row.name}`}\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>\n                    <div className='font-medium'>{row.name}</div>\n                  </TableCell>\n                  <TableCell>\n                    <div className='capitalize text-sm text-muted-foreground'>{row.status}</div>\n                  </TableCell>\n                  <TableCell>\n                    <div className='text-sm text-muted-foreground'>{row.email}</div>\n                  </TableCell>\n                  <TableCell>\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 DataTable2\n"
    }
  ]
}