[LIVE CODING] jsPDF Autotable Documentation with Source Code

[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
READ  How to make a Simple Keylogger in Javascript - Coding Shiksha











<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



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);


READ  Youtube Playlist Search Application in Javascript using Youtube Data API V3




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

Close Menu

Indian Desi Tools - Ultimate Tools Website

Demo Description

This will close in 20 seconds