I create a PDF document based on a table using jsPDF and AutoTable:
var doc = new jsPDF('p', 'pt');
//columns and rows are arrays created from the table content
doc.autoTable(columns, rows, {
drawRow: function (row) {
if (row.index == rows.length - 1) {
console.log('last row');
//TODO
}
},
pageBreak: 'avoid',
headerStyles: {
fillColor: [239, 154, 154],
textColor: [0, 0, 0],
halign: 'center'
},
bodyStyles: {
halign: 'center'
},
margin: {top: 60},
theme: 'striped'
});
doc.save('table.pdf');
What I'm trying to do is setting a different background color for the last table row. As shown in the code above, I can detect when the last row is being drawn, however I can't manage to modify it. I have tried setting the row.fillColor using an RGB value, which seems to have no effect.
I also took a look at the examples, but couldn't find anything that could help me on that issue. Any ideas?
To change styles dynamically you have two options. The first is to use didParseCell to change autoTable styles:
autoTable(doc, {
html: '#table',
didParseCell: function (data) {
var rows = data.table.body;
if (data.row.index === rows.length - 1) {
data.cell.styles.fillColor = [239, 154, 154];
}
}
});
The second is to use willDrawCell if you'd rather use jspdf styling functions:
autoTable(doc, {
html: '#table',
willDrawCell: function (data) {
var rows = data.table.body;
if (data.row.index === rows.length - 1) {
doc.setFillColor(239, 154, 154);
}
},
});
See more advanced examples here.