{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "data-table-9", "type": "registry:component", "title": "DataTable 9", "description": "DataTable 9. A component for displaying and managing tabular data.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "checkbox", "table" ], "files": [ { "path": "components/watermelon/data-table-9.tsx", "type": "registry:component", "content": "'use client'\n\nimport { Fragment, useMemo, useState } from 'react'\n\nimport { ChevronDownIcon, ChevronUpIcon } from 'lucide-react'\n\nimport { Button } from '@/components/base-ui/button'\nimport { Checkbox } from '@/components/base-ui/checkbox'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/base-ui/table'\n\ntype TeamMember = {\n dob: string\n email: string\n hireDate: string\n name: string\n role: string\n}\n\ntype TeamRow = {\n budget: number\n department: string\n location: string\n members: readonly TeamMember[]\n nextMilestone: string\n teamId: string\n teamName: string\n}\n\nconst data: readonly TeamRow[] = [\n {\n teamId: 'TEAM-01',\n teamName: 'Digital Marketing',\n department: 'Marketing',\n location: 'London',\n nextMilestone: 'Launch New Campaign',\n budget: 30000,\n members: [\n {\n name: 'Alice Johnson',\n role: 'Lead Strategist',\n email: 'alice.johnson@example.com',\n hireDate: '2020-01-15',\n dob: '1990-01-01'\n },\n {\n name: 'Bob Smith',\n role: 'Content Creator',\n email: 'bob.smith@example.com',\n hireDate: '2021-03-22',\n dob: '1992-05-15'\n },\n {\n name: 'Charlie Brown',\n role: 'SEO Specialist',\n email: 'charlie.brown@example.com',\n hireDate: '2022-07-30',\n dob: '1995-11-20'\n }\n ]\n },\n {\n teamId: 'TEAM-02',\n teamName: 'Product Development',\n department: 'Engineering',\n location: 'San Francisco',\n nextMilestone: 'Release Version 2.0',\n budget: 50000,\n members: [\n {\n name: 'David Wilson',\n role: 'Product Manager',\n email: 'david.wilson@example.com',\n hireDate: '2019-05-10',\n dob: '1988-02-25'\n },\n {\n name: 'Emma Johnson',\n role: 'UX Designer',\n email: 'emma.johnson@example.com',\n hireDate: '2020-08-15',\n dob: '1990-11-30'\n },\n {\n name: 'Frank Miller',\n role: 'QA Engineer',\n email: 'frank.miller@example.com',\n hireDate: '2021-01-20',\n dob: '1993-06-10'\n }\n ]\n },\n {\n teamId: 'TEAM-03',\n teamName: 'Sales Team',\n department: 'Sales',\n location: 'New York',\n nextMilestone: 'Close Q3 Deals',\n budget: 40000,\n members: [\n {\n name: 'Grace Lee',\n role: 'Sales Executive',\n email: 'grace.lee@example.com',\n hireDate: '2021-05-12',\n dob: '1995-03-22'\n },\n {\n name: 'Henry Davis',\n role: 'Account Manager',\n email: 'henry.davis@example.com',\n hireDate: '2020-11-01',\n dob: '1992-07-15'\n },\n {\n name: 'Ivy Garcia',\n role: 'Sales Analyst',\n email: 'ivy.garcia@example.com',\n hireDate: '2021-09-15',\n dob: '1994-02-10'\n }\n ]\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 DataTable9 = () => {\n const [expandedIds, setExpandedIds] = useState([])\n const [selectedIds, setSelectedIds] = useState([])\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((team) => team.teamId) : [])\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 toggleExpanded = (id: string) => {\n setExpandedIds((current) => (current.includes(id) ? current.filter((item) => item !== id) : [...current, id]))\n }\n\n return (\n
\n
\n \n \n \n \n \n toggleAll(!!value)}\n aria-label='Select all teams'\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 \n \n Team Name\n \n \n Department\n \n \n Location\n \n \n Next Milestone\n \n \n Budget\n \n \n \n \n {data.map((team) => {\n const isExpanded = expandedIds.includes(team.teamId)\n const isSelected = selectedIdSet.has(team.teamId)\n\n return (\n \n \n \n toggleExpanded(team.teamId)}\n aria-expanded={isExpanded}\n aria-label={\n isExpanded ? `Collapse details for ${team.teamName}` : `Expand details for ${team.teamName}`\n }\n size='icon'\n variant='ghost'\n >\n {isExpanded ? (\n \n \n toggleRow(team.teamId, !!value)}\n aria-label={`Select ${team.teamName}`}\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 \n \n
{team.teamName}
\n \n {team.department}\n {team.location}\n {team.nextMilestone}\n {formatCurrency(team.budget)}\n \n\n {isExpanded ? (\n \n \n
\n \n \n \n \n Member Name\n \n \n Role\n \n \n Email\n \n \n Hire Date\n \n \n Date of Birth\n \n \n \n \n {team.members.map((member) => (\n \n \n {member.name}\n {member.role}\n {member.email}\n {member.hireDate}\n {member.dob}\n \n ))}\n \n
\n \n \n ) : null}\n \n )\n })}\n \n \n
\n
\n )\n}\n\nexport default DataTable9\n" } ] }