{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table-7",
  "type": "registry:component",
  "title": "Table 7",
  "description": "Table 7. A structured layout used to display data in rows and columns, enabling easy comparison, sorting, and organization of information.",
  "dependencies": [],
  "registryDependencies": [
    "table"
  ],
  "files": [
    {
      "path": "components/watermelon/table-7.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useState } from 'react';\n\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/components/base-ui/table';\n\nconst transactions = [\n  {\n    id: 'TXN001',\n    type: 'Credit',\n    amount: '₹2,500.00',\n    method: 'UPI',\n  },\n  {\n    id: 'TXN002',\n    type: 'Debit',\n    amount: '₹1,200.00',\n    method: 'Credit Card',\n  },\n  {\n    id: 'TXN003',\n    type: 'Credit',\n    amount: '₹3,800.00',\n    method: 'Net Banking',\n  },\n  {\n    id: 'TXN004',\n    type: 'Debit',\n    amount: '₹900.00',\n    method: 'Wallet',\n  },\n  {\n    id: 'TXN005',\n    type: 'Credit',\n    amount: '₹4,200.00',\n    method: 'UPI',\n  },\n  {\n    id: 'TXN006',\n    type: 'Debit',\n    amount: '₹700.00',\n    method: 'Debit Card',\n  },\n  {\n    id: 'TXN007',\n    type: 'Credit',\n    amount: '₹1,500.00',\n    method: 'Bank Transfer',\n  },\n];\n\nconst Table7 = () => {\n  const [selectedId, setSelectedId] = useState<string | null>(null);\n\n  return (\n    <div className=\"w-full\">\n      <div className=\"overflow-hidden rounded-xl border shadow-xs\">\n        <Table className=\"\">\n          <TableHeader>\n            <TableRow>\n              <TableHead className=\"w-30\">Transaction ID</TableHead>\n              <TableHead>Type</TableHead>\n              <TableHead>Method</TableHead>\n              <TableHead className=\"text-right\">Amount</TableHead>\n            </TableRow>\n          </TableHeader>\n\n          <TableBody>\n            {transactions.map((txn) => {\n              const isSelected = selectedId === txn.id;\n\n              return (\n                <TableRow\n                  key={txn.id}\n                  onClick={() => setSelectedId(isSelected ? null : txn.id)}\n                  className={`cursor-pointer transition-colors ${\n                    isSelected\n                      ? 'bg-primary/30 hover:bg-primary/25'\n                      : 'hover:bg-muted/50'\n                  }`}\n                >\n                  <TableCell className=\"font-medium\">{txn.id}</TableCell>\n                  <TableCell>{txn.type}</TableCell>\n                  <TableCell>{txn.method}</TableCell>\n                  <TableCell className=\"text-right\">{txn.amount}</TableCell>\n                </TableRow>\n              );\n            })}\n          </TableBody>\n\n          <TableFooter>\n            <TableRow>\n              <TableCell colSpan={3}>Net Balance</TableCell>\n              <TableCell className=\"text-right\">₹9,200.00</TableCell>\n            </TableRow>\n          </TableFooter>\n        </Table>\n      </div>\n      <p className=\"text-muted-foreground mt-4 text-center text-sm\">\n        Click a row to highlight it\n      </p>\n    </div>\n  );\n};\n\nexport default Table7;\n"
    }
  ]
}