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.

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