{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table-12",
  "type": "registry:component",
  "title": "Table 12",
  "description": "Table 12. 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-12.tsx",
      "type": "registry:component",
      "content": "import {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/components/base-ui/table';\n\nconst employees = [\n  {\n    id: 1,\n    name: 'Aarav Sharma',\n    role: 'Frontend Engineer',\n    company: 'Zeta Labs',\n    email: 'aarav@zeta.com',\n    location: 'India',\n    lastAccess: '2 Apr 2026',\n    salary: '₹18,00,000',\n  },\n  {\n    id: 2,\n    name: 'Priya Verma',\n    role: 'Product Manager',\n    company: 'Nova Systems',\n    email: 'priya@nova.com',\n    location: 'India',\n    lastAccess: '30 Mar 2026',\n    salary: '₹22,50,000',\n  },\n  {\n    id: 3,\n    name: 'Rohan Gupta',\n    role: 'Backend Engineer',\n    company: 'ByteStack',\n    email: 'rohan@bytestack.com',\n    location: 'Singapore',\n    lastAccess: '28 Mar 2026',\n    salary: '₹25,00,000',\n  },\n  {\n    id: 4,\n    name: 'Sneha Kapoor',\n    role: 'UI Designer',\n    company: 'PixelCraft',\n    email: 'sneha@pixel.com',\n    location: 'India',\n    lastAccess: '25 Mar 2026',\n    salary: '₹12,00,000',\n  },\n  {\n    id: 5,\n    name: 'Kunal Mehta',\n    role: 'DevOps Engineer',\n    company: 'CloudNest',\n    email: 'kunal@cloudnest.com',\n    location: 'Germany',\n    lastAccess: '20 Mar 2026',\n    salary: '₹28,00,000',\n  },\n  {\n    id: 6,\n    name: 'Anjali Singh',\n    role: 'Data Analyst',\n    company: 'Insight AI',\n    email: 'anjali@insight.ai',\n    location: 'India',\n    lastAccess: '18 Mar 2026',\n    salary: '₹14,50,000',\n  },\n  {\n    id: 7,\n    name: 'Vikas Patel',\n    role: 'QA Engineer',\n    company: 'Testify Labs',\n    email: 'vikas@testify.com',\n    location: 'Canada',\n    lastAccess: '15 Mar 2026',\n    salary: '₹11,00,000',\n  },\n];\n\nconst Table12 = () => {\n  return (\n    <div className=\"w-full\">\n      <div className=\"mx-auto max-w-2xl [&>div]:rounded-sm [&>div]:border\">\n        <Table>\n          <TableHeader>\n            <TableRow className=\"hover:bg-transparent\">\n              <TableHead className=\"bg-background sticky left-0\">ID</TableHead>\n\n              <TableHead className=\"bg-background sticky left-7.5\">\n                Name\n              </TableHead>\n\n              <TableHead>Role</TableHead>\n              <TableHead>Company</TableHead>\n              <TableHead>Email</TableHead>\n              <TableHead>Location</TableHead>\n              <TableHead>Last Active</TableHead>\n              <TableHead className=\"text-right\">Salary</TableHead>\n            </TableRow>\n          </TableHeader>\n\n          <TableBody>\n            {employees.map((emp) => (\n              <TableRow key={emp.id} className=\"hover:bg-muted/50\">\n                <TableCell className=\"bg-background sticky left-0 font-medium\">\n                  {emp.id}\n                </TableCell>\n\n                <TableCell className=\"bg-background sticky left-7.5\">\n                  <div className=\"flex flex-col\">\n                    <span className=\"font-medium\">{emp.name}</span>\n                    <span className=\"text-muted-foreground text-xs\">\n                      {emp.role}\n                    </span>\n                  </div>\n                </TableCell>\n\n                <TableCell>{emp.role}</TableCell>\n                <TableCell>{emp.company}</TableCell>\n                <TableCell className=\"text-muted-foreground\">\n                  {emp.email}\n                </TableCell>\n                <TableCell>{emp.location}</TableCell>\n                <TableCell>{emp.lastAccess}</TableCell>\n                <TableCell className=\"text-right font-medium\">\n                  {emp.salary}\n                </TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </div>\n\n      <p className=\"text-muted-foreground mt-4 text-center text-sm\">\n        Sticky column table\n      </p>\n    </div>\n  );\n};\n\nexport default Table12;\n"
    }
  ]
}