{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table-with-checkbox",
  "type": "registry:block",
  "title": "table-with-checkbox",
  "registryDependencies": [
    "https://retroui.dev/r/table.json"
  ],
  "files": [
    {
      "path": "preview/components/table-with-checkbox.tsx",
      "content": "import { Badge, Checkbox } from \"@/components/retroui\"\nimport {\n  Table,\n} from \"@/components/retroui/Table\"\nimport { useState } from \"react\"\n\nconst employees = [\n  {\n    id: \"1\",\n    name: \"Alice Johnson\",\n    department: \"Engineering\",\n    status: \"Active\",\n    salary: \"85,000\",\n  },\n  {\n    id: \"2\",\n    name: \"Bob Smith\",\n    department: \"Product\",\n    status: \"Active\",\n    salary: \"95,000\",\n  },\n  {\n    id: \"3\",\n    name: \"Carol Williams\",\n    department: \"Design\",\n    status: \"On Leave\",\n    salary: \"70,000\",\n  },\n  {\n    id: \"4\",\n    name: \"David Brown\",\n    department: \"Engineering\",\n    status: \"Active\",\n    salary: \"90,000\",\n  },\n  {\n    id: \"5\",\n    name: \"Eve Davis\",\n    department: \"Engineering\",\n    status: \"Active\",\n    salary: \"75,000\",\n  },\n  {\n    id: \"6\",\n    name: \"Frank Wilson\",\n    department: \"Marketing\",\n    status: \"Inactive\",\n    salary: \"80,000\",\n  },\n]\n\nexport default function TableWithCheckbox() {\n  const [selectedEmployees, setSelectedEmployees] = useState<Set<string>>(new Set())\n\n  const handleSelectAll = (checked: boolean) => {\n    if (checked) {\n      setSelectedEmployees(new Set(employees.map(emp => emp.id)))\n    } else {\n      setSelectedEmployees(new Set())\n    }\n  }\n\n  const handleSelectEmployee = (employeeId: string, checked: boolean) => {\n    const newSelected = new Set(selectedEmployees)\n    if (checked) {\n      newSelected.add(employeeId)\n    } else {\n      newSelected.delete(employeeId)\n    }\n    setSelectedEmployees(newSelected)\n  }\n\n  const isAllSelected = selectedEmployees.size === employees.length\n\n  return (\n    <Table className=\"max-w-lg mb-6 mx-auto\">\n      <Table.Header>\n        <Table.Row>\n          <Table.Head className=\"w-[50px]\">\n            <Checkbox\n              checked={isAllSelected}\n              onCheckedChange={handleSelectAll}\n            />\n          </Table.Head>\n          <Table.Head>Name</Table.Head>\n          <Table.Head>Department</Table.Head>\n          <Table.Head>Status</Table.Head>\n          <Table.Head className=\"text-right\">Salary</Table.Head>\n        </Table.Row>\n      </Table.Header>\n      <Table.Body>\n        {employees.map((employee) => (\n          <Table.Row key={employee.id}>\n            <Table.Cell>\n              <Checkbox\n                checked={selectedEmployees.has(employee.id)}\n                onCheckedChange={(checked) => handleSelectEmployee(employee.id, Boolean(checked))}\n              />\n            </Table.Cell>\n            <Table.Cell className=\"font-medium\">{employee.name}</Table.Cell>\n            <Table.Cell>{employee.department}</Table.Cell>\n            <Table.Cell>\n              <Badge\n                variant={employee.status === 'Active' ? 'default' : employee.status === 'On Leave' ? 'outline' : 'solid'}\n                size=\"sm\"\n              >\n                {employee.status}\n              </Badge>\n            </Table.Cell>\n            <Table.Cell className=\"text-right\">$ {employee.salary}</Table.Cell>\n          </Table.Row>\n        ))}\n      </Table.Body>\n      <Table.Footer>\n        <Table.Row>\n          <Table.Cell colSpan={4}>Selected: {selectedEmployees.size} / {employees.length}</Table.Cell>\n          <Table.Cell className=\"text-right font-semibold\">$ {employees.reduce((total, employee) => total + Number(employee.salary.replace(',', '')), 0)}</Table.Cell>\n        </Table.Row>\n      </Table.Footer>\n    </Table>\n  )\n}",
      "type": "registry:block",
      "target": "components/retroui/preview/table-with-checkbox.tsx"
    }
  ]
}