All Components

Repeated Table Headers

The Drawing library enables you to render recurrent table headers.

To repeat the <thead> elements on each page, pass the repeatHeaders: true option.

For more information on how to render recurrent table headers with the PDF Export component, refer to its documentation.

import { Component } from '@angular/core';
import { InvoiceRow } from './invoice-row';
import { invoiceData } from './invoice-data';
import { exportElement } from './export-element';

@Component({
  selector: 'my-app',
  template: `
    <button (click)="onClick(drawMe)">Export PDF...</button>
    <div #drawMe>
      <table class="table">
        <thead>
          <tr>
            <th>Product</th>
            <th>Unit Price</th>
            <th>Qty</th>
            <th>Total</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let row of data">
            <td>{{ row.productName }}</td>
            <td>{{ row.unitPrice }}</td>
            <td>{{ row.qty }}</td>
            <td>{{ row.total }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  `
})
export class AppComponent {
  public data: InvoiceRow[] = [...invoiceData, ...invoiceData, ...invoiceData];

  public onClick(element) {
    exportElement(element, {
      paperSize: "A4",
      repeatHeaders: true
    });
  }
}

import { InvoiceRow } from './invoice-row';

export const invoiceData = [
  new InvoiceRow('QUESO CABRALES', 21, 5),
  new InvoiceRow('ALICE MUTTON', 39, 7),
  new InvoiceRow('GENEN SHOUYU', 15.50, 3),
  new InvoiceRow('CHARTREUSE VERTE', 18, 1),
  new InvoiceRow('MASCARPONE FABIOLI', 32, 2),
  new InvoiceRow('VALKOINEN SUKLAA', 16.25, 3)
];

export class InvoiceRow {
  public get total(): number {
    return this.unitPrice * this.qty;
  }

  constructor(
    public productName: string,
    public unitPrice: number,
    public qty: number
  ) {}
}

import { drawDOM, exportPDF, DrawOptions, Group } from '@progress/kendo-drawing';
import { saveAs } from '@progress/kendo-file-saver';

export function exportElement(element: HTMLElement, options?: DrawOptions) {
    drawDOM(element, options).then((group: Group) => {
        return exportPDF(group);
    }).then((dataUri) => {
        saveAs(dataUri, 'export.pdf');
    });
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

In this article