cosscom__coss/apps/ui/public/r/table-framed.json

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table-framed",
  "type": "registry:example",
  "description": "Framed table",
  "registryDependencies": ["@coss/table", "@coss/badge", "@coss/frame"],
  "files": [
    {
      "path": "registry/default/examples/table-framed.tsx",
      "content": "import { Badge } from \"@/registry/default/ui/badge\"\nimport { Frame, FramePanel } from \"@/registry/default/ui/frame\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\"\n\nexport default function TableFramed() {\n  return (\n    <Frame className=\"w-full\">\n      <FramePanel>\n        <Table>\n          <TableHeader>\n            <TableRow>\n              <TableHead>Project</TableHead>\n              <TableHead>Status</TableHead>\n              <TableHead>Team</TableHead>\n              <TableHead className=\"text-right\">Budget</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            <TableRow>\n              <TableCell className=\"font-medium\">Website Redesign</TableCell>\n              <TableCell>\n                <Badge variant=\"outline\">\n                  <span\n                    className=\"size-1.5 rounded-full bg-emerald-500\"\n                    aria-hidden=\"true\"\n                  />\n                  Paid\n                </Badge>\n              </TableCell>\n              <TableCell>Frontend Team</TableCell>\n              <TableCell className=\"text-right\">$12,500</TableCell>\n            </TableRow>\n            <TableRow>\n              <TableCell className=\"font-medium\">Mobile App</TableCell>\n              <TableCell>\n                <Badge variant=\"outline\">\n                  <span\n                    className=\"size-1.5 rounded-full bg-muted-foreground/64\"\n                    aria-hidden=\"true\"\n                  />\n                  Unpaid\n                </Badge>\n              </TableCell>\n              <TableCell>Mobile Team</TableCell>\n              <TableCell className=\"text-right\">$8,750</TableCell>\n            </TableRow>\n            <TableRow>\n              <TableCell className=\"font-medium\">API Integration</TableCell>\n              <TableCell>\n                <Badge variant=\"outline\">\n                  <span\n                    className=\"size-1.5 rounded-full bg-amber-500\"\n                    aria-hidden=\"true\"\n                  />\n                  Pending\n                </Badge>\n              </TableCell>\n              <TableCell>Backend Team</TableCell>\n              <TableCell className=\"text-right\">$5,200</TableCell>\n            </TableRow>\n            <TableRow>\n              <TableCell className=\"font-medium\">Database Migration</TableCell>\n              <TableCell>\n                <Badge variant=\"outline\">\n                  <span\n                    className=\"size-1.5 rounded-full bg-emerald-500\"\n                    aria-hidden=\"true\"\n                  />\n                  Paid\n                </Badge>\n              </TableCell>\n              <TableCell>DevOps Team</TableCell>\n              <TableCell className=\"text-right\">$3,800</TableCell>\n            </TableRow>\n            <TableRow>\n              <TableCell className=\"font-medium\">User Dashboard</TableCell>\n              <TableCell>\n                <Badge variant=\"outline\">\n                  <span\n                    className=\"size-1.5 rounded-full bg-emerald-500\"\n                    aria-hidden=\"true\"\n                  />\n                  Paid\n                </Badge>\n              </TableCell>\n              <TableCell>UX Team</TableCell>\n              <TableCell className=\"text-right\">$7,200</TableCell>\n            </TableRow>\n            <TableRow>\n              <TableCell className=\"font-medium\">Security Audit</TableCell>\n              <TableCell>\n                <Badge variant=\"outline\">\n                  <span\n                    className=\"size-1.5 rounded-full bg-red-500\"\n                    aria-hidden=\"true\"\n                  />\n                  Failed\n                </Badge>\n              </TableCell>\n              <TableCell>Security Team</TableCell>\n              <TableCell className=\"text-right\">$2,100</TableCell>\n            </TableRow>\n          </TableBody>\n          <TableFooter>\n            <TableRow>\n              <TableCell colSpan={3}>Total Budget</TableCell>\n              <TableCell className=\"text-right font-medium\">$39,550</TableCell>\n            </TableRow>\n          </TableFooter>\n        </Table>\n      </FramePanel>\n    </Frame>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "categories": ["table", "badge", "frame"]
}