How can I style last row using jsPDF Autotable plugin?
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);
}
};