Ubuntu
17 lines
3.9 KiB
JSON
17 lines
3.9 KiB
JSON
{
|
|
"$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"
|
|
}
|
|
]
|
|
} |