{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table-demo",
  "title": "Table: Invoices",
  "description": "Status badges, numeric columns and a footer total.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.cuelark.com/r/badge.json",
    "https://ui.cuelark.com/r/table.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/examples/table-demo.tsx",
      "content": "import { Badge } from \"@/registry/cuelark/ui/badge\";\nimport { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from \"@/registry/cuelark/ui/table\";\n\nconst invoices = [\n  { id: \"INV-0042\", customer: \"Atlas Labs\", status: \"Paid\", amount: 1290 },\n  { id: \"INV-0043\", customer: \"Borealis\", status: \"Pending\", amount: 480 },\n  { id: \"INV-0044\", customer: \"Cinder & Co\", status: \"Paid\", amount: 2350 },\n  { id: \"INV-0045\", customer: \"Driftwood\", status: \"Overdue\", amount: 99 },\n];\nconst money = new Intl.NumberFormat(\"en-US\", { style: \"currency\", currency: \"USD\" });\nconst tone = { Paid: \"success\", Pending: \"warning\", Overdue: \"destructive\" } as const;\n\nexport default function TableDemo() {\n  return (\n    <div className=\"w-full max-w-2xl\">\n      <Table striped>\n        <TableCaption>Invoices for October 2026.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Invoice</TableHead>\n            <TableHead>Customer</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead numeric>Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.map((inv) => (\n            <TableRow key={inv.id}>\n              <TableCell className=\"font-mono text-xs\">{inv.id}</TableCell>\n              <TableCell>{inv.customer}</TableCell>\n              <TableCell>\n                <Badge size=\"sm\" dot variant={tone[inv.status as keyof typeof tone]}>\n                  {inv.status}\n                </Badge>\n              </TableCell>\n              <TableCell numeric>{money.format(inv.amount)}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={3}>Total</TableCell>\n            <TableCell numeric>{money.format(invoices.reduce((s, i) => s + i.amount, 0))}</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "table",
    "example"
  ],
  "type": "registry:component"
}