AutoTable – Table plugin for jsPDF – Generating PDF Tables – Harshad Chopra

AutoTable – Table plugin for jsPDF – Generating PDF Tables – Harshad Chopra

In this post we will be looking a library which is known as AutoTable which is used to generate pdf tables from html and also from directly javascript. It is basically a Table plugin for jsPDF – a pdf library for javascript.

Installation

Get the library by doing one of these things:

Example

<table id="my-table"><!-- ... --></table>

<script src="jspdf.min.js"></script>
<script src="jspdf.plugin.autotable.min.js"></script>

<script>
    var doc = new jsPDF();
    // You can use html:
    doc.autoTable({html: '#my-table'});
    
    // Or JavaScript:
    doc.autoTable({
        head: [['Name', 'Email', 'Country']],
        body: [
            ['David', 'david@example.com', 'Sweden'],
            ['Castille', 'castille@example.com', 'Norway'],
            // ...
        ]
    });
    
    doc.save('table.pdf');
</script>

Or you can use Javascript

import jsPDF from 'jspdf';
import 'jspdf-autotable';

const doc = new jsPDF();
doc.autoTable({html: '#my-table'});
doc.save('table.pdf');
Styling options
  • theme: 'striped'|'grid'|'plain'|'css' = 'striped'
  • styles: StyleDef
  • headStyles: StyleDef
  • bodyStyles: StyleDef
  • footStyles: StyleDef
  • alternateRowStyles: StyleDef
  • columnStyles: {&columnDataKey: StyleDef} Note that the columnDataKey is normally the index of the column, but could also be the dataKey of a column if content initialized with the columns property

StyleDef:

  • font: 'helvetica'|'times'|'courier' = 'helvetica'
  • fontStyle: 'normal'|'bold'|'italic'|'bolditalic' = 'normal'
  • overflow: 'linebreak'|'ellipsize'|'visible'|'hidden' = 'normal'
  • fillColor: Color? = null
  • textColor: Color? = 20
  • cellWidth: 'auto'|'wrap'|number = 'auto'
  • minCellWidth: number? = 10
  • minCellHeight: number = 0
  • halign: 'left'|'center'|'right' = 'left'
  • valign: 'top'|'middle'|'bottom' = 'top'
  • fontSize: number = 10
  • cellPadding: Padding = 10
  • lineColor: Color = 10
  • lineWidth: number = 0 // If 0, no border is drawn
Other options
  • startY: number = null Where the table should start to be printed (basically a margin top value only for the first page)
  • margin: Margin = 40
  • pageBreak: 'auto'|'avoid'|'always' If set to avoid the plugin will only split a table onto multiple pages if table height is larger than page height.
  • rowPageBreak: 'auto'|'avoid' = 'auto' If set to avoid the plugin will only split a row onto multiple pages if row height is larger than page height.
  • tableWidth: 'auto'|'wrap'|number = 'auto'
  • showHead: 'everyPage'|'firstPage'|'never' = 'everyPage''
  • showFoot: 'everyPage'|'lastPage'|'never' = 'everyPage''
  • tableLineWidth: number = 0
  • tableLineColor: Color = 200 The table line/border color

Leave a Reply

Close Menu