How to add a field name as first row in between col header and rows in jspdf autotable?

Question

I need to print an invoice..im using jspdf but i need to add a field as doctor name and department name in between col header and rows..is it possible in jspdf?

demo img

  let col=['Item','Unit','Amt','Discnt','Net Amt','Vat%','VatAmt','Total']; 
  // initialization for headers
  let title = "INVOICE" // title of report
   for(let i=0;i <this.itemForPrint.length;i++)
   {
   row.push(this.itemForPrint[i].itemName);
      row.push(this.itemForPrint[i].unit);
      row.push(this.itemForPrint[i].rate);
      row.push(this.itemForPrint[i].insDiscount);
      row.push(this.itemForPrint[i].amount);
      rowD.push(row);
      }
      this.getReport(col , rowD , title );
      }
      getReport(col: any[], rowD: any[], title: any)
     {
       var pageContent = function (data) {
          // HEADER

          // FOOTER
         var gdate = "Generated on : "+formatDate(new Date(), 'dd/MM/yyyy', 
          'en');
          var str = "Page " + data.pageCount;
          // Total page number plugin only available in jspdf v1.0+
          if (typeof pdf.putTotalPages === 'function') {
              str = str + " of " + totalPagesExp;
          }
          pdf.setFontSize(10);
          var pageHeight = pdf.internal.pageSize.height || 
          pdf.internal.pageSize.getHeight();
          pdf.text(gdate,40, pageHeight - 30);
          pdf.text(str,500, pageHeight - 30); // showing current page number
      };
       pdf.autoTable(col, rowD,
          { addPageContent: pageContent,

              margin: { top: 200 },

          });

Answer 1

For your example I would include an empty row which I manually set the height of using minCellHeight and set colspan to be equal to total column count. Then I would use didDrawCell hook to manually draw the headers.