{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table-9",
  "type": "registry:component",
  "title": "Table 9",
  "description": "Table 9. 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-9.tsx",
      "type": "registry:component",
      "content": "'use client';\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  { id: 'TXN001', status: 'Success', amount: '₹2,500', method: 'UPI' },\n  { id: 'TXN002', status: 'Pending', amount: '₹1,200', method: 'Card' },\n  { id: 'TXN003', status: 'Failed', amount: '₹3,800', method: 'Net Banking' },\n  { id: 'TXN004', status: 'Success', amount: '₹900', method: 'Wallet' },\n  { id: 'TXN005', status: 'Success', amount: '₹4,200', method: 'UPI' },\n  { id: 'TXN006', status: 'Pending', amount: '₹700', method: 'Debit Card' },\n  { id: 'TXN007', status: 'Failed', amount: '₹1,500', method: 'Bank Transfer' },\n  { id: 'TXN008', status: 'Success', amount: '₹2,100', method: 'UPI' },\n  { id: 'TXN009', status: 'Pending', amount: '₹950', method: 'Google Pay' },\n  { id: 'TXN010', status: 'Failed', amount: '₹1,800', method: 'Apple Pay' },\n];\n\nconst Table9 = () => {\n  return (\n    <div className=\"w-full\">\n      <div className=\"rounded-lg border shadow-sm overflow-hidden bg-background isolate\">\n        <div className=\"[&>div]:max-h-80 [&>div]:overflow-auto [&>div]:[clip-path:inset(0_round_0.5rem)]\">\n          <Table className=\"border-separate border-spacing-0\">\n            <TableHeader>\n              <TableRow className=\"from-muted/95 via-muted/90 to-muted/80 sticky top-0 z-20 bg-gradient-to-b backdrop-blur-md\">\n                <TableHead className=\"h-12 px-4 text-left align-middle font-medium text-muted-foreground border-b border-border/50\">\n                  Transaction\n                </TableHead>\n                <TableHead className=\"h-12 px-4 text-left align-middle font-medium text-muted-foreground border-b border-border/50\">\n                  Status\n                </TableHead>\n                <TableHead className=\"h-12 px-4 text-left align-middle font-medium text-muted-foreground border-b border-border/50\">\n                  Method\n                </TableHead>\n                <TableHead className=\"h-12 px-4 text-right align-middle font-medium text-muted-foreground border-b border-border/50\">\n                  Amount\n                </TableHead>\n              </TableRow>\n            </TableHeader>\n\n            <TableBody>\n              {transactions.map((txn) => (\n                <TableRow key={txn.id} className=\"hover:bg-muted/30 transition-colors\">\n                  <TableCell className=\"h-12 px-4 align-middle font-medium\">{txn.id}</TableCell>\n                  <TableCell className=\"h-12 px-4 align-middle\">{txn.status}</TableCell>\n                  <TableCell className=\"h-12 px-4 align-middle\">{txn.method}</TableCell>\n                  <TableCell className=\"h-12 px-4 text-right align-middle font-mono\">{txn.amount}</TableCell>\n                </TableRow>\n              ))}\n            </TableBody>\n\n            <TableFooter>\n              <TableRow className=\"bg-muted/20 hover:bg-muted/20 border-t border-border/50\">\n                <TableCell colSpan={3} className=\"h-12 px-4 align-middle font-medium\">Total</TableCell>\n                <TableCell className=\"h-12 px-4 text-right align-middle font-bold text-primary\">₹19,650</TableCell>\n              </TableRow>\n            </TableFooter>\n          </Table>\n        </div>\n      </div>\n\n      <p className=\"text-muted-foreground mt-4 text-center text-sm font-medium\">\n        Sticky header with precision-clipped corners and glassmorphism\n      </p>\n    </div>\n  );\n};\n\nexport default Table9;\n"
    }
  ]
}