[LIVE CODING] jsPDF Autotable Documentation with Source Code

What is jsPDF Autotable?


jsPDF Autotable is the standard plugin of jsPDF in order to make Tables in jsPDF Library. With the help of this library you can make awesome tables listed below. There are various versions of table you can make, you can even write custom css for the tables which are generated using this library. There are commonly three major table themes which are used in this plugin.


  • Theme Striped
  • Theme Grid
  • Theme Plain











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



You can also get the plugin with a package manager:

  • bower install jspdf-autotable
  • npm install jspdf-autotable (only client side usage)
  • meteor add jspdf:autotable




var columns = ["ID", "Name", "Country"];
var rows = [
    [1, "Shaw", "Tanzania", ...],
    [2, "Nelson", "Kazakhstan", ...],
    [3, "Garcia", "Madagascar", ...],
var doc = new jsPDF('p', 'pt');
doc.autoTable(columns, rows);


Usage with options


READ  Build a Math Scientific Calculator in HTML CSS and Javascript Full Project For Beginners


var columns = [
    {title: "ID", dataKey: "id"},
    {title: "Name", dataKey: "name"}, 
    {title: "Country", dataKey: "country"}, 
var rows = [
    {"id": 1, "name": "Shaw", "country": "Tanzania", ...},
    {"id": 2, "name": "Nelson", "country": "Kazakhstan", ...},
    {"id": 3, "name": "Garcia", "country": "Madagascar", ...},
var doc = new jsPDF('p', 'pt');
doc.autoTable(columns, rows, {
    styles: {fillColor: [100, 255, 255]},
    columnStyles: {
    	id: {fillColor: 255}
    margin: {top: 60},
    beforePageContent: function(data) {
    	doc.text("Header", 40, 30);





    // Styling
    theme: 'striped', // 'striped', 'grid' or 'plain'
    styles: {},
    headerStyles: {},
    bodyStyles: {},
    alternateRowStyles: {},
    columnStyles: {},
    // Properties
    startY: false, // false (indicates margin top value) or a number
    margin: 40, a number, array or object
    pageBreak: 'auto', // 'auto', 'avoid' or 'always'
    tableWidth: 'auto', // 'auto', 'wrap' or a number, 
    // Hooks
    createdHeaderCell: function (cell, data) {},
    createdCell: function (cell, data) {},
    drawHeaderRow: function (row, data) {},
    drawRow: function (row, data) {},
    drawHeaderCell: function (cell, data) {},
    drawCell: function (cell, data) {},
    beforePageContent: function (data) {},
    afterPageContent: function (data) {}

Leave a Reply