How can I align each different cell in a table as well in a header in JSPDF-Autotable?

Viewed 380

What do I need to do in order to style a certain cell in a header and in a table in JSPDF-Autotable? What I am trying to say is that I want to know how to select a specific cell inside a table or in a header and edit it (e.g. with styling). I also want to how to do so if I give a column and a row (both defined with different variables)into the autotable function like

pdf.autoTable(this.dynMonthColumns, this.financialValueRows, options, {createdHeaderCell(cell, data) {
        this.alignCol(cell, data);
      });

Here begins my function

public exportPDFWithNote() {

here is my array consisting of the names of dynamically sorted months which works of course.

this.dynMonthColumns = this.pdfWithoutNoteColumns;

Here I wanted to change the array called dynMonthColumns the following way: I wanted to align the 1st(named 'Konto') , the 2nd(named 'Bezeichnung') and the 3rd('KAG') to the right. None of this has worked.

function alignCol (cell, data){
      let col = this.dynMonthColumns.index;
      console.log('Spalte', col);
      switch (col) {
        case 0:
          cell.styles.halign = 'right';
          break;
        case 1:
          cell.styles.halign = 'right';
          break;
        case 2:
         cell.styles.halign = 'center';
          break;
      }
    }

I also tried to do the same with the row array called financialRowValues. This array is 2-dimensional though.


function alignRow(cell, data){
      let row = this.financialValueRows.index;
      switch (row) {
        case 0:
          cell.styles.halign = 'right';
          break;
        case 1:
          cell.styles.halign = 'right';
          break;
        case 2:
          cell.styles.halign = 'right';
          break;
      }
    }

With the didDrawPage hook, the header title and the footer title can be shown without problems.


 const options = {
      didDrawPage(data) {
        header(data);
        footer(data);

      }, beforePageContent: header,
   

      margin: {
        top: 80
      },
    

     

      headStyles : {
        //fill color: background color
        fillColor: [ bgcRnum , bgcGnum, bgcBnum], fontFamily: 'Arial, Helvetica, sans-serif', textColor: [ fdcRnum , fdcGnum , fdcBnum ] , fontSize: 7 , halign: 'left'
      //[ R nummber , G number, B number] RGB-style
      }



    };

When I export a PDF, the columns and the rows, both sorted, are shown. the createdHeaderCell hook hasn't really worked. It was supposed to launch the function that aligns the columns

    pdf.autoTable(this.dynMonthColumns, this.financialValueRows, options, {createdHeaderCell(cell, data) {
        this.alignCol(cell, data);
      });

    if (typeof pdf.putTotalPages === 'function') {
      pdf.putTotalPages(totalPagesExp);
    }

    pdf.save('SuSa_ohne_Anmerkung.pdf');
    this.currentExport.emit({ excel: true });

}

So how can I style each and every table cell in JSPDF-Autotable (e.g. alignment, coloring etc.)?

enter image description here

This is the month header and I have to be able to change certain cells of the header and of the rows of the table by giving them different alignments . How do I do this?

0 Answers
Related