[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  React Hooks Simple Calculator From Scratch

 

Screenshots

 

 

 

 

 

Install

 

 

<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

 

Usage

 

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);
doc.save('table.pdf');

 

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);
    }
});
doc.save('table.pdf');

 

READ  XML to JavaScript object converter in Node using node-xml2js

 

Options

 

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