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.)?
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?
