{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table-07",
  "title": "With checkbox",
  "description": "Select-all header, per-row checkboxes, and a selection count.",
  "dependencies": [],
  "registryDependencies": [
    "table",
    "checkbox"
  ],
  "files": [
    {
      "path": "registry/patterns/table/table-07.tsx",
      "content": "'use client'\n\nimport { Checkbox } from '@/components/ui/checkbox'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/components/ui/table'\nimport { useState } from 'react'\n\nconst people = [\n  { id: 'u1', name: 'Ava Carter', email: 'ava@example.com', role: 'Designer' },\n  { id: 'u2', name: 'Ben Lopez', email: 'ben@example.com', role: 'Engineer' },\n  { id: 'u3', name: 'Cara Diaz', email: 'cara@example.com', role: 'Manager' },\n  { id: 'u4', name: 'Dan Wells', email: 'dan@example.com', role: 'Engineer' },\n]\n\nexport function Table07() {\n  const [selected, setSelected] = useState<string[]>(['u2'])\n\n  const allChecked = selected.length === people.length\n  const someChecked = selected.length > 0 && !allChecked\n\n  const toggleAll = (next: boolean) =>\n    setSelected(next ? people.map((person) => person.id) : [])\n\n  const toggleRow = (id: string) =>\n    setSelected((prev) =>\n      prev.includes(id) ? prev.filter((row) => row !== id) : [...prev, id],\n    )\n\n  return (\n    <div className=\"w-full max-w-xl\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-10\">\n              <Checkbox\n                aria-label=\"Select all\"\n                checked={allChecked}\n                indeterminate={someChecked && !allChecked}\n                onCheckedChange={(value) => toggleAll(value === true)}\n              />\n            </TableHead>\n            <TableHead>Name</TableHead>\n            <TableHead>Email</TableHead>\n            <TableHead className=\"text-right\">Role</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {people.map((person) => {\n            const isSelected = selected.includes(person.id)\n            return (\n              <TableRow\n                key={person.id}\n                data-state={isSelected ? 'selected' : undefined}\n              >\n                <TableCell>\n                  <Checkbox\n                    aria-label={`Select ${person.name}`}\n                    checked={isSelected}\n                    onCheckedChange={() => toggleRow(person.id)}\n                  />\n                </TableCell>\n                <TableCell className=\"font-medium\">{person.name}</TableCell>\n                <TableCell className=\"text-muted-foreground\">\n                  {person.email}\n                </TableCell>\n                <TableCell className=\"text-right\">{person.role}</TableCell>\n              </TableRow>\n            )\n          })}\n        </TableBody>\n      </Table>\n      <p className=\"text-muted-foreground mt-3 text-sm\">\n        {selected.length} of {people.length} row(s) selected.\n      </p>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/table/table-07.tsx"
    }
  ],
  "type": "registry:block"
}