How to give borders to jspdf autotable content generated dynamically as in template

Question

i am using jspdf autotable to generate pdf, but i am failing to put borders as in the template. Can anyone help me to sort it out. i need the pdf viewed to be as in template.

Need border of header to have 2 border lines as shown here in template.

Last rows of total to be displayed like this.

TS:

captureScreen() {
    this.displayTable = true;
    var doc = new jsPDF();
    var col = ["2006", "Budgeted Operating Expenses ", 'Exclude', 'Expenses'];
    var rows = [];
    for (var i = 0; i < this.items.budget.length; i++) {
      var temp = []
      for (var key in this.items.budget[i]) {
        temp.push(this.items.budget[i][key])
      }
      rows.push(temp);
    }
    doc.text(100, 10, this.items.title.title);
    doc.text(20, 20, "Insert Property Name Here");
    doc.setFont("Times New Roman");
    doc.setFontSize(12);
    doc.text(20, 30, "Tenant:");
    doc.text(40, 30,  this.items.owner.company);

    doc.text(20, 40, "Address:");
    doc.text(40, 40,this.items.owner.address);

    doc.text(20, 50, "Suite:");
    doc.text(40, 50,this.items.owner.suite);


    doc.autoTable(col, rows,{
      tableLineColor: [189, 195, 199],
      tableLineWidth: 0.75,
    theme:"plain",  
    startY: 60,
    margin: {
        top: 60
    },
   headerStyles: {
        //Not getting what to be done here
    },
    });
    document.getElementById("convertToPdf").setAttribute('src', doc.output('datauri'))
  }

DEMO Thanks in advance.

Answer 1

jsPdf-autotable has no tools "from the box" for creating cell borders in (top || right || bottom || left) or double bourder.

You may use jspdf methods for manualy paint necessary elements (lines):

doc.autoTable(col, rows, {
        tableLineColor: [189, 195, 199],
        tableLineWidth: 0.75,
        theme: "plain",
        startY: 60,
        margin: {
            top: 60
        },
        drawRow: (row, data) => {
            //-------------------------------
            // Paint double lines bellow cell
            //-------------------------------
            let firstCell = row.cells[0];
            let secondCell = row.cells[1];
            if (firstCell.text == 'Total due anually') {
               let borderLineOffset = 1;
               const columnWidth = data.table.columns[3].width;
               data.doc.line(data.cursor.x - columnWidth, data.cursor.y + row.height - borderLineOffset / 2, data.cursor.x, data.cursor.y + row.height - borderLineOffset / 2);
               data.doc.line(data.cursor.x - columnWidth, data.cursor.y + row.height + borderLineOffset / 2, data.cursor.x, data.cursor.y + row.height + borderLineOffset / 2);
            }
            //-------------------------------
            // Paint footer line
            //-------------------------------
            if (secondCell.text == 'Totally sales Tax') {
                data.doc.line(data.cursor.x - data.table.width, data.cursor.y + row.height, data.cursor.x, data.cursor.y + row.height);
                data.doc.line(data.cursor.x - data.table.width, data.cursor.y + row.height, data.cursor.x, data.cursor.y + row.height);
            }
        },
        drawHeaderRow: (head, data) => {
            //---------------------------------------
            // Write the line at the bottom of header
            //---------------------------------------
            data.doc.line(data.cursor.x, data.cursor.y + head.height, data.cursor.x + data.table.width, data.cursor.y + head.height);
        }
    });

Here you may found other elements for paint them in pdf. jsPdf docs
StackBlitz