{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table-3",
  "title": "Invoice Line Items Summary",
  "description": "Invoice line items table with quantity, unit, and unit price columns plus a footer summing subtotal, tax, and total due.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "table"
  ],
  "files": [
    {
      "path": "registry/blocks/table/3/table-block.tsx",
      "content": "import {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\"\n\nconst lineItems: {\n  description: string\n  category: string\n  qty: number\n  unit: string\n  unitPrice: number\n}[] = [\n  {\n    description: \"Brand identity design\",\n    category: \"Design\",\n    qty: 1,\n    unit: \"project\",\n    unitPrice: 3200,\n  },\n  {\n    description: \"UI component library\",\n    category: \"Development\",\n    qty: 1,\n    unit: \"project\",\n    unitPrice: 5800,\n  },\n  {\n    description: \"Content strategy workshop\",\n    category: \"Consulting\",\n    qty: 3,\n    unit: \"session\",\n    unitPrice: 450,\n  },\n  {\n    description: \"Copywriting: landing pages\",\n    category: \"Content\",\n    qty: 5,\n    unit: \"page\",\n    unitPrice: 280,\n  },\n  {\n    description: \"QA & usability testing\",\n    category: \"Development\",\n    qty: 8,\n    unit: \"hour\",\n    unitPrice: 95,\n  },\n  {\n    description: \"Project management\",\n    category: \"Consulting\",\n    qty: 12,\n    unit: \"hour\",\n    unitPrice: 75,\n  },\n]\n\nconst TAX_RATE = 0.08\n\nfunction fmt(n: number) {\n  return new Intl.NumberFormat(\"en-US\", {\n    style: \"currency\",\n    currency: \"USD\",\n    minimumFractionDigits: 2,\n  }).format(n)\n}\n\nfunction SummaryLabel({\n  children,\n  className = \"\",\n}: {\n  children: string\n  className?: string\n}) {\n  return (\n    <>\n      <TableCell colSpan={3} className={`pl-3 sm:hidden ${className}`}>\n        {children}\n      </TableCell>\n      <TableCell\n        colSpan={4}\n        className={`hidden pl-3 sm:table-cell md:hidden ${className}`}\n      >\n        {children}\n      </TableCell>\n      <TableCell\n        colSpan={5}\n        className={`hidden pl-3 md:table-cell ${className}`}\n      >\n        {children}\n      </TableCell>\n    </>\n  )\n}\n\nexport default function TableBlock() {\n  const subtotal = lineItems.reduce(\n    (sum, item) => sum + item.qty * item.unitPrice,\n    0\n  )\n  const tax = subtotal * TAX_RATE\n  const total = subtotal + tax\n\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-12 text-foreground\">\n      <div className=\"w-full max-w-2xl\">\n        <div className=\"flex flex-col gap-1 border-b border-border pb-5\">\n          <div className=\"flex items-start justify-between gap-4\">\n            <div className=\"flex flex-col gap-0.5\">\n              <span className=\"text-base font-semibold text-foreground\">\n                Acme Studio\n              </span>\n              <span className=\"text-xs text-muted-foreground\">\n                hello@acmestudio.io\n              </span>\n            </div>\n            <div className=\"flex flex-col items-end gap-0.5\">\n              <span className=\"font-mono text-xs font-medium text-foreground\">\n                INV-2026-047\n              </span>\n              <span className=\"text-xs text-muted-foreground\">\n                Issued Jun 17, 2026, due Jul 17, 2026\n              </span>\n            </div>\n          </div>\n        </div>\n\n        <div className=\"mt-6 rounded-xl border border-border bg-card\">\n          <Table>\n            <TableCaption className=\"mt-0 border-t border-border px-3 py-2.5 text-left\">\n              Billed to{\" \"}\n              <span className=\"font-medium text-foreground\">\n                Northgate Holdings Ltd.\n              </span>{\" \"}\n              Net 30 payment terms apply.\n            </TableCaption>\n            <TableHeader>\n              <TableRow>\n                <TableHead className=\"pl-3\">Description</TableHead>\n                <TableHead className=\"hidden sm:table-cell\">Category</TableHead>\n                <TableHead className=\"text-right\">Qty</TableHead>\n                <TableHead className=\"hidden text-right md:table-cell\">\n                  Unit\n                </TableHead>\n                <TableHead className=\"text-right\">Unit Price</TableHead>\n                <TableHead className=\"pr-3 text-right\">Amount</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              {lineItems.map((item) => (\n                <TableRow key={item.description}>\n                  <TableCell className=\"pl-3 font-medium\">\n                    {item.description}\n                  </TableCell>\n                  <TableCell className=\"hidden text-muted-foreground sm:table-cell\">\n                    {item.category}\n                  </TableCell>\n                  <TableCell className=\"text-right text-muted-foreground tabular-nums\">\n                    {item.qty}\n                  </TableCell>\n                  <TableCell className=\"hidden text-right text-muted-foreground md:table-cell\">\n                    {item.unit}\n                  </TableCell>\n                  <TableCell className=\"text-right text-muted-foreground tabular-nums\">\n                    {fmt(item.unitPrice)}\n                  </TableCell>\n                  <TableCell className=\"pr-3 text-right font-medium tabular-nums\">\n                    {fmt(item.qty * item.unitPrice)}\n                  </TableCell>\n                </TableRow>\n              ))}\n            </TableBody>\n            <TableFooter>\n              <TableRow className=\"border-0\">\n                <SummaryLabel className=\"text-muted-foreground\">\n                  Subtotal\n                </SummaryLabel>\n                <TableCell className=\"pr-3 text-right tabular-nums\">\n                  {fmt(subtotal)}\n                </TableCell>\n              </TableRow>\n              <TableRow className=\"border-0\">\n                <SummaryLabel className=\"text-muted-foreground\">\n                  Tax (8%)\n                </SummaryLabel>\n                <TableCell className=\"pr-3 text-right tabular-nums\">\n                  {fmt(tax)}\n                </TableCell>\n              </TableRow>\n              <TableRow>\n                <SummaryLabel className=\"font-semibold text-foreground\">\n                  Total Due\n                </SummaryLabel>\n                <TableCell className=\"pr-3 text-right font-semibold text-foreground tabular-nums\">\n                  {fmt(total)}\n                </TableCell>\n              </TableRow>\n            </TableFooter>\n          </Table>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/table-3.tsx"
    }
  ],
  "meta": {
    "height": "565px",
    "tier": "free"
  },
  "categories": [
    "table"
  ],
  "type": "registry:block"
}