How can I style last row using jsPDF Autotable plugin?

Question

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?

@SimonBengtsson yes I did, since I was a bit of angry that google search for my issue haven't lead me to a ton of SO posts ;) Such a useful stuff as your AutoTable plugin kinda deserves more popularity imo — Droidman, Mar 02 '16 at 09:04

Simon Bengtsson · Accepted Answer · 2019-08-14T07:40:29.023

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.

score 6 · Answer 2 · answered Feb 14 '19 at 08:11

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);
  }
};

How can I style last row using jsPDF Autotable plugin?

2 Answers2