{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table-10",
  "type": "registry:component",
  "title": "Table 10",
  "description": "Table 10. 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-10.tsx",
      "type": "registry:component",
      "content": "import {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/components/base-ui/table';\n\nconst orders = [\n  { id: 'ORD001', status: 'Delivered', amount: '₹2,500', method: 'UPI' },\n  { id: 'ORD002', status: 'Processing', amount: '₹1,200', method: 'Card' },\n  {\n    id: 'ORD003',\n    status: 'Cancelled',\n    amount: '₹3,800',\n    method: 'Net Banking',\n  },\n  { id: 'ORD004', status: 'Delivered', amount: '₹900', method: 'Wallet' },\n  { id: 'ORD005', status: 'Delivered', amount: '₹4,200', method: 'UPI' },\n  { id: 'ORD006', status: 'Processing', amount: '₹700', method: 'Debit Card' },\n  {\n    id: 'ORD007',\n    status: 'Cancelled',\n    amount: '₹1,500',\n    method: 'Bank Transfer',\n  },\n  { id: 'ORD008', status: 'Delivered', amount: '₹2,100', method: 'UPI' },\n  { id: 'ORD009', status: 'Processing', amount: '₹950', method: 'Google Pay' },\n  { id: 'ORD010', status: 'Cancelled', amount: '₹1,800', method: 'Apple Pay' },\n];\n\nconst Table10 = () => {\n  return (\n    <div className=\"w-full\">\n      <div className=\"grid [&>div]:max-h-70 [&>div]:overflow-y-auto [&>div]:rounded-sm [&>div]:border\">\n        <Table>\n          <TableHeader>\n            <TableRow className=\"bg-muted hover:bg-muted sticky top-0 z-20 shadow-[inset_0px_0px_4px_0_rgba(0,0,0,0.05)]\">\n              <TableHead className=\"w-25\">Order ID</TableHead>\n              <TableHead>Status</TableHead>\n              <TableHead>Method</TableHead>\n              <TableHead className=\"text-right\">Amount</TableHead>\n            </TableRow>\n          </TableHeader>\n\n          <TableBody>\n            {orders.map((order) => (\n              <TableRow key={order.id}>\n                <TableCell className=\"font-medium\">{order.id}</TableCell>\n                <TableCell>{order.status}</TableCell>\n                <TableCell>{order.method}</TableCell>\n                <TableCell className=\"text-right\">{order.amount}</TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n\n          <TableFooter>\n            <TableRow className=\"bg-muted hover:bg-muted sticky bottom-0 z-20 shadow-[inset_0px_0px_4px_0_rgba(0,0,0,0.05)]\">\n              <TableCell colSpan={3}>Total Revenue</TableCell>\n              <TableCell className=\"text-right\">₹19,650</TableCell>\n            </TableRow>\n          </TableFooter>\n        </Table>\n      </div>\n\n      <p className=\"text-muted-foreground mt-4 text-center text-sm\">\n        Sticky header & footer table\n      </p>\n    </div>\n  );\n};\n\nexport default Table10;\n"
    }
  ]
}