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/takumi/table

Usage

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

import { TABLE } from "@/components/pdf/table/table";
import { PdfcnThemeProvider } from "@/components/pdf/theme-provider";
import {
  TakumiDocument,
  TakumiPage,
} from "@/lib/pdf-primitives";

@Component({
  imports: [TakumiDocument, TakumiPage, PdfcnThemeProvider, TABLE],
  template: `
    <takumi-document>
      <takumi-page size="A4">
        <pdf-theme-provider>
          <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>
        </pdf-theme-provider>
      </takumi-page>
    </takumi-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