Generating Bootstrap themed tables with autoTable

While creating PDF result document of calculators for Financial Choice , a result document was required to be presnted to the user , which contained various blocks of information like salary details, pension details , loan details etc.
To create this document i made use of the autoTable library specifically made to work with the jsPDF library which was already being used throughout the work.

The following are the steps to generate bootstrap themed tables into the result document generated on the client side. 

I made use of the following libraries - 

1.  jsPDF - to generate client side pdf result document
2. autoTable - to accomodate the user result into distinct tables.

Firstly let's generate an empty pdf document through jsPDF. You can download jsPDF throug the following link : jsPDF . Include the file to create an empty jsPDF doc.

//creating an empty pdf document
var doc = new jsPDF('p','pt');

where the first parameter specifies the orientation of the document ; p for portrait and the second parameter is for measurement units ; pt stands for point.

Next fetch the autoTable javascript source file from : AutoTable . Include the downloaded file into your script tag.

Now let's create a header first with the use of autoTable containing the name of the document -

//Creating a header with title Insurance Adequacy Calculations
var header = [{ title: "Insurance Adequacy Calculations"}];

//Adding style to that header
doc.autoTable(header, [], {
    margin: { top: 20 },
    styles: {
        rowHeight: 40,
        halign: 'left',
        valign: 'middle',
        fontSize: 15
        }
});

Now we can move forward to adding more information regarding the user and putting them into tables like -

//creating an assets table describing user's financial asset
var assetsColumns = [
    { title: "Assets", dataKey: "assets" },
    { title: "Value", dataKey: "value" },
    ];

var assetsRows = [
    { "assets": "Home Value", "value": moneyFormat.to(assetsObject.homeValue) },
    { "assets": "Cash At Bank", "value": moneyFormat.to(assetsObject.cashAtBank) },
    { "assets": "Other Investments", "value": moneyFormat.to(assetsObject.otherInvestment) },
    { "assets": "Super Balance", "value": moneyFormat.to(assetsObject.superBalance) },
    ];

Above the datakey identifies into which column the data should be inserted.Once you have captured the data yu can then create the table through :

//Here the table top is set according to the above table's ending position
doc.autoTable(assetsColumns, assetsRows, {
    margin: { top: doc.autoTableEndPosY() + 40 },
    styles: {
        // fontSize:20,
        halign: "left",
        overflow: "linebreak"
        },
        columnStyles: {
        info: {
             columnWidth: 340 },
             value: { columnWidth: 177 }
        },
});

You can explore more options on the GitHub links provided above.