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:
doc.autoTable({
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:
doc.autoTable({
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.
It has been almost three years since the last response to this question.
I was struggling a bit to achieve that effect with drawCell function.
In jspdf-autotable": "^3.0.10"
you should use one of three following callbacks to achieve what you want:
// Use to change the content of the cell before width calculations etc are performed
didParseCell: function (data) {
},
willDrawCell: function (data) {
},
// Use to draw additional content such as images in table cells
didDrawCell: function (data) {
},
In your case willDrawCell
is the one you want to use.
So the code will be something like:
doc.autoTable({
columns,
body,
headStyles: {
fillColor: "#0d47a1"
},
willDrawCell: drawCell
});
let drawCell = function(data) {
var doc = data.doc;
var rows = data.table.body;
if (rows.length === 1) {
} else if (data.row.index === rows.length - 1) {
doc.setFontStyle("bold");
doc.setFontSize("10");
doc.setFillColor(255, 255, 255);
}
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With