{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "data-table-13",
  "type": "registry:component",
  "title": "DataTable 13",
  "description": "DataTable 13. A component for displaying and managing tabular data.",
  "dependencies": [],
  "registryDependencies": [
    "button",
    "checkbox",
    "input",
    "select",
    "table"
  ],
  "files": [
    {
      "path": "components/watermelon/data-table-13.tsx",
      "type": "registry:component",
      "content": "'use client'\n\nimport { useState } from 'react'\n\nimport { Button } from '@/components/base-ui/button'\nimport { Checkbox } from '@/components/base-ui/checkbox'\nimport { Input } from '@/components/base-ui/input'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/base-ui/select'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/base-ui/table'\n\ntype PersonStatus = 'active' | 'inactive' | 'pending'\n\ntype Person = {\n  email: string\n  firstName: string\n  id: string\n  lastName: string\n  progress: number\n  status: PersonStatus\n}\n\ntype PersonField = Exclude<keyof Person, 'id'>\n\nconst initialData: readonly Person[] = [\n  {\n    id: '1',\n    firstName: 'John',\n    lastName: 'Doe',\n    email: 'john.doe@example.com',\n    status: 'active',\n    progress: 75\n  },\n  {\n    id: '2',\n    firstName: 'Jane',\n    lastName: 'Smith',\n    email: 'jane.smith@example.com',\n    status: 'inactive',\n    progress: 45\n  },\n  {\n    id: '3',\n    firstName: 'Bob',\n    lastName: 'Johnson',\n    email: 'bob.johnson@example.com',\n    status: 'active',\n    progress: 90\n  },\n  {\n    id: '4',\n    firstName: 'Alice',\n    lastName: 'Brown',\n    email: 'alice.brown@example.com',\n    status: 'pending',\n    progress: 60\n  },\n  {\n    id: '5',\n    firstName: 'Charlie',\n    lastName: 'Wilson',\n    email: 'charlie.wilson@example.com',\n    status: 'active',\n    progress: 80\n  }\n] as const\n\nconst DataTable13 = () => {\n  const [data, setData] = useState<Person[]>([...initialData])\n  const [selectedIds, setSelectedIds] = useState<string[]>([])\n\n  const allSelected = data.length > 0 && selectedIds.length === data.length\n  const someSelected = selectedIds.length > 0 && !allSelected\n\n  const updateCell = <K extends PersonField>(id: string, field: K, value: Person[K]) => {\n    setData((current) =>\n      current.map((person) => (person.id === id ? { ...person, [field]: value } : person))\n    )\n  }\n\n  const toggleAll = (checked: boolean) => {\n    setSelectedIds(checked ? data.map((person) => person.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  const refreshData = () => {\n    setData([...initialData])\n    setSelectedIds([])\n  }\n\n  return (\n    <div className='w-60 sm:w-100 md:w-120 lg:w-160 2xl:w-220 mx-auto space-y-4'>\n      <div className='overflow-hidden rounded-xl border border-border/60 bg-background shadow-sm'>\n        <Table className='w-60 sm:w-100 md:w-120 lg:w-160 2xl:w-220 mx-auto'>\n          <TableHeader>\n            <TableRow>\n              <TableHead className='h-12 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 rows'\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-12 bg-muted/20 text-[13px] font-medium tracking-[0.08em] text-muted-foreground'>\n                First Name\n              </TableHead>\n              <TableHead className='h-12 bg-muted/20 text-[13px] font-medium tracking-[0.08em] text-muted-foreground'>\n                Last Name\n              </TableHead>\n              <TableHead className='h-12 bg-muted/20 text-[13px] font-medium tracking-[0.08em] text-muted-foreground'>\n                Email\n              </TableHead>\n              <TableHead className='h-12 bg-muted/20 text-[13px] font-medium tracking-[0.08em] text-muted-foreground'>\n                Status\n              </TableHead>\n              <TableHead className='h-12 bg-muted/20 text-[13px] font-medium tracking-[0.08em] text-muted-foreground'>\n                Progress\n              </TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {data.length > 0 ? (\n              data.map((person) => {\n                const isSelected = selectedIds.includes(person.id)\n\n                return (\n                  <TableRow\n                    key={person.id}\n                    data-state={isSelected ? 'selected' : undefined}\n                    className='hover:bg-muted/10 data-[state=selected]:bg-muted/20'\n                  >\n                    <TableCell className='py-3.5'>\n                      <Checkbox\n                        checked={isSelected}\n                        onCheckedChange={(value) => toggleRow(person.id, !!value)}\n                        aria-label={`Select ${person.firstName} ${person.lastName}`}\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.5'>\n                      <Input\n                        value={person.firstName}\n                        onChange={(event) => updateCell(person.id, 'firstName', event.target.value)}\n                        className='h-8 rounded-md border border-border/40 bg-muted/50 px-1.5 focus-visible:bg-background focus-visible:ring-1 dark:border-border/30 dark:bg-muted/20'\n                        aria-label='Editable first name'\n                      />\n                    </TableCell>\n                    <TableCell className='py-3.5'>\n                      <Input\n                        value={person.lastName}\n                        onChange={(event) => updateCell(person.id, 'lastName', event.target.value)}\n                        className='h-8 rounded-md border border-border/40 bg-muted/50 px-1.5 focus-visible:bg-background focus-visible:ring-1 dark:border-border/30 dark:bg-muted/20'\n                        aria-label='Editable last name'\n                      />\n                    </TableCell>\n                    <TableCell className='py-3.5'>\n                      <Input\n                        value={person.email}\n                        onChange={(event) => updateCell(person.id, 'email', event.target.value)}\n                        className='h-8 rounded-md border border-border/40 bg-muted/50 px-1.5 focus-visible:bg-background focus-visible:ring-1 dark:border-border/30 dark:bg-muted/20'\n                        aria-label='Editable email'\n                      />\n                    </TableCell>\n                    <TableCell className='py-3.5'>\n                      <Select\n                        value={person.status}\n                        onValueChange={(value) => updateCell(person.id, 'status', value as PersonStatus)}\n                      >\n                        <SelectTrigger\n                          className='h-8 rounded-md border border-border/40 bg-muted/50 px-1.5 focus:bg-background focus:ring-1 dark:border-border/30 dark:bg-muted/20'\n                          aria-label='Editable status'\n                        >\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value='active'>Active</SelectItem>\n                          <SelectItem value='inactive'>Inactive</SelectItem>\n                          <SelectItem value='pending'>Pending</SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </TableCell>\n                    <TableCell className='py-3.5'>\n                      <div className='flex items-center gap-2'>\n                        <Input\n                          type='number'\n                          min='0'\n                          max='100'\n                          value={person.progress.toString()}\n                          onChange={(event) => {\n                            const nextValue = Number(event.target.value)\n                            const safeValue = Number.isNaN(nextValue) ? person.progress : Math.max(0, Math.min(100, nextValue))\n                            updateCell(person.id, 'progress', safeValue)\n                          }}\n                          className='h-8 w-20 rounded-md border border-border/40 bg-muted/50 px-1.5 focus-visible:bg-background focus-visible:ring-1 dark:border-border/30 dark:bg-muted/20'\n                          aria-label='Editable progress'\n                        />\n                        <span className='text-sm text-muted-foreground'>%</span>\n                      </div>\n                    </TableCell>\n                  </TableRow>\n                )\n              })\n            ) : (\n              <TableRow>\n                <TableCell colSpan={6} className='h-24 text-center'>\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      <div className='text-muted-foreground flex items-center justify-between gap-2 rounded-xl border border-border/60 bg-background px-4 py-3 text-sm shadow-sm max-md:flex-col'>\n        <div>{data.length} rows total</div>\n        <div className='flex items-center space-x-2'>\n          <Button variant='outline' size='sm' onClick={refreshData}>\n            Refresh Data\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default DataTable13\n"
    }
  ]
}