For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any docs URL. An agent skill is available at /.well-known/agent-skills/site-skill.md.
AP /angular-pdfcn
0Sponsor

Table

PreviousNext

Low-level table primitives.

Takumi Forme
Rendering PDF…

Installation

$ pnpm dlx shadcn@latest add @angular-pdfcn/forme/table

Usage

import { Component } from "@angular/core";

import { TABLE } from "@/components/pdf/table/table";
import {
  FormeDocument,
  FormePage,
} from "@/lib/pdf-primitives";

@Component({
  imports: [FormeDocument, FormePage, TABLE],
  template: `
    <forme-document>
      <forme-page size="A4" [margin]="40">
        <pdf-table variant="line" [zebraStripe]="false">
          <pdf-table-header>
            <pdf-table-row header>
              <pdf-table-cell>Item</pdf-table-cell>
              <pdf-table-cell align="center">Qty</pdf-table-cell>
              <pdf-table-cell align="right">Price</pdf-table-cell>
              <pdf-table-cell align="right">Total</pdf-table-cell>
            </pdf-table-row>
          </pdf-table-header>
          <pdf-table-body>
            <pdf-table-row>
              <pdf-table-cell>Design</pdf-table-cell>
              <pdf-table-cell align="center">1</pdf-table-cell>
              <pdf-table-cell align="right">$150.00</pdf-table-cell>
              <pdf-table-cell align="right">$150.00</pdf-table-cell>
            </pdf-table-row>
            <pdf-table-row>
              <pdf-table-cell>Development</pdf-table-cell>
              <pdf-table-cell align="center">1</pdf-table-cell>
              <pdf-table-cell align="right">$2,500.00</pdf-table-cell>
              <pdf-table-cell align="right">$2,500.00</pdf-table-cell>
            </pdf-table-row>
            <pdf-table-row>
              <pdf-table-cell>Testing</pdf-table-cell>
              <pdf-table-cell align="center">1</pdf-table-cell>
              <pdf-table-cell align="right">$800.00</pdf-table-cell>
              <pdf-table-cell align="right">$800.00</pdf-table-cell>
            </pdf-table-row>
          </pdf-table-body>
          <pdf-table-footer>
            <pdf-table-row footer>
              <pdf-table-cell>Total</pdf-table-cell>
              <pdf-table-cell>{{ " " }}</pdf-table-cell>
              <pdf-table-cell>{{ " " }}</pdf-table-cell>
              <pdf-table-cell align="right">$3,450.00</pdf-table-cell>
            </pdf-table-row>
          </pdf-table-footer>
        </pdf-table>
      </forme-page>
    </forme-document>
  `,
})
export class TableDemo {}

Variants

<pdf-table variant="striped" zebraStripe>
  <!-- header, body, rows, and cells -->
</pdf-table>

API Reference

PdfTable

Input Type Default
variant 'line' | 'grid' | 'minimal' | 'striped' | 'compact' | 'bordered' | 'primary-header' 'line'
zebraStripe boolean false
noWrap boolean false
style Style -

Rows and cells are projected content. pdf-table-header, pdf-table-body, and pdf-table-footer group the rows and take a style input.

PdfTableRow

Input Type Default
header boolean false
footer boolean false
stripe boolean false
variant 'line' | 'grid' | 'minimal' | 'striped' | 'compact' | 'bordered' | 'primary-header' inherited

PdfTableCell

Input Type Default
header boolean false
footer boolean false
align 'left' | 'center' | 'right' 'left'
width string | number -
variant 'line' | 'grid' | 'minimal' | 'striped' | 'compact' | 'bordered' | 'primary-header' inherited