How to customize header cell in PDF using jsPDF-AutoTable plugin?

Question

I encountered strange bug when tried to convert HTML to pdf using jsPDF-AutoTable plugin. According to official Github page there is possibility to customize any headerCell and ordinary cell by using createdHeaderCell and createdCell hooks. I used the code below to change styling for particular header and row cells (Name header and Jack cell). I also upload this code here.

$('#btn').click(function(){

            var columns = ['ID','Name','Address','Age'];
            var rows = [
            [1,'John','Vilnius',22],
            [2,'Jack','Riga',25]
            ];

            var doc = new jsPDF('p', 'pt');

            doc.setFontSize(20);
            doc.text(30, 30, 'Table'); 

            doc.autoTable(columns, rows, {
                margin: { top: 50, left: 20, right: 20, bottom: 0 },
                createdHeaderCell: function (cell, data) {
                    if (cell.raw === 'Name') {
                        cell.styles.fontSize= 15;
                       cell.styles.textColor = 111;
                    } else {//else rule for drawHeaderCell hook
                        cell.styles.textColor = 255;
                        cell.styles.fontSize = 10;

                    }
                },
                   createdCell: function (cell, data) {
                    if (cell.raw === 'Jack') {
                       cell.styles.fontSize= 15;
                       cell.styles.textColor = 111;
                    } 
                }
            });

            doc.save('output.pdf');
});

In this code createdCell hook works as expected and style the cell with Jack, but nothing happened for Name header. Did I miss something or is it a bug?

The funny thing that I find strange workaround using drawHeaderCell instead of createdHeaderCell, but in this case styling occurs for next Address header, not the Nameas I wanted. My workaround: I used previous ID header to style Name, but this solution not very beautiful, because I should use else rule for styling, otherwise styling will be applied for all headers after ID, not just Name, so I want to find out what is wrong with my initial code.

Thank you for you attention.

Solution 1

Since nobody answered I used my workaround solution using drawHeaderCell hook with code like below. I tested it on many tables and it works fine (in production I used dynamically generated table with different headers). The only real drawback that you cannot change color of the 1st header, but hopefully I don't need to do this.

$('#btn').click(function(){

            var columns = ['ID','Name','Address','Age'];
            var rows = [
            [1,'John','Vilnius',22],
            [2,'Jack','Riga',25]
            ];

            var doc = new jsPDF('p', 'pt');

            doc.setFontSize(20);
            doc.text(30, 30, 'Table'); 

            doc.autoTable(columns, rows, {
                margin: { top: 50, left: 20, right: 20, bottom: 0 },
                drawHeaderCell: function (cell, data) {
                    if (cell.raw === 'ID') {//paint.Name header red
                        cell.styles.fontSize= 15;
                       cell.styles.textColor = [255,0,0];
                    } else {
                        cell.styles.textColor = 255;
                        cell.styles.fontSize = 10;

                    }
                },
                   createdCell: function (cell, data) {
                    if (cell.raw === 'Jack') {
                       cell.styles.fontSize= 15;
                       cell.styles.textColor = [255,0,0];
                    } 
                }
            });

            doc.save('output.pdf');
});

Solution 2

The solution provided by user2771704 will work well but as said its not change the first header color, for that use "fillColor" as styles.. basically it will change the color for all items and then you can replace the body cell color with "createdCell"

    doc.autoTable(columns, rows, {
        createdCell: function (cell, data) {
            cell.styles.fillColor = '#ffffff';
        },

        styles: { fillColor: "#43a047" },
    });

Solution 3

Version 3 of jsPdf Autotables has replaced createdCell with didParceCell which provides an object that looks like this:

You can then add some code inside this that looks like:

        didParseCell: function (table) {

          if (table.section === 'head') {
            table.cell.styles.textColor = '#000000';
          }
       }