How to Customize Header Cell in Pdf Using Jspdf-Autotable Plugin

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

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

jsPDF Autotable API?

There is readme.md available as documentation. For more details they are suggesting to read the class definitions for HookData, Table, Row, Cell etc. defined in models.ts:

To see what is included in the Table, Row, Column and Cell types, either log them to the console or take a look at src/models.ts

For ready reference here are the definitions:

class HookData {
  table: Table
  pageNumber: number
  pageCount: number // Deprecated, use pageNumber instead
  settings: Settings
  doc: jsPDFDocument
  cursor: Pos | null
}

class CellHookData extends HookData {
  cell: Cell
  row: Row
  column: Column
  section: 'head' | 'body' | 'foot'
}

class Table {
  id?: string | number
  settings: Settings
  styles: StylesProps
  hooks: HookProps
  columns: Column[]
  head: Row[]
  body: Row[]
  foot: Row[]
  pageNumber = 1
  finalY?: number
  startPageNumber?: number
}

class Row {
  readonly raw: HTMLTableRowElement | RowInput
  readonly element?: HTMLTableRowElement
  readonly index: number
  readonly section: Section
  readonly cells: { [key: string]: Cell }
  spansMultiplePages: boolean

  height = 0
}

class Cell {
  raw: HTMLTableCellElement | CellInput
  styles: Styles
  text: string[]
  section: Section
  colSpan: number
  rowSpan: number

  contentHeight = 0
  contentWidth = 0
  wrappedWidth = 0
  minReadableWidth = 0
  minWidth = 0

  width = 0
  height = 0
  x = 0
  y = 0
}

class Column {
  raw: ColumnInput | null
  dataKey: string | number
  index: number

  wrappedWidth = 0
  minReadableWidth = 0
  minWidth = 0
  width = 0
}

Can't add font for jsPDF autotable header

the issue is fixed, please change the headerstyles to

headerStyles: {
fontStyle: 'majalla'
},

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.

jsPDF auto-table header text not working and how to render html to header

You have to attach the header to beforePageContent and pass it directly, do not attach with options

 <!DOCTYPE html><html lang="en">
    <head>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width, initial-scale=1.0">        <meta http-equiv="X-UA-Compatible" content="ie=edge">        <title>Document</title>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.60/jspdf.min.js"></script>        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.0.15/jspdf.plugin.autotable.js"></script>        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.0.15/jspdf.plugin.autotable.src.js"></script>    </head>
    <body>        <button onclick="generatePdf()">Generate pdf</button>

        <script>            function generatePdf() {
                var columns = [{                        title: "ID",                        dataKey: "id"                    },                    {                        title: "Name",                        dataKey: "name"                    },                    {                        title: "Country",                        dataKey: "country"                    },                ];                var rows = [{                        "id": 1,                        "name": "Shaw",                        "country": "Tanzania"                    },                    {                        "id": 2,                        "name": "Nelson",                        "country": "Kazakhstan"                    },                    {                        "id": 3,                        "name": "Garcia",                        "country": "Madagascar"                    },                ];

                var doc = new jsPDF('p', 'pt');
                var header = function (data) {                    doc.setFontSize(18);                    doc.setTextColor(40);                    doc.setFontStyle('normal');//doc.addImage(headerImgData, 'JPEG', data.settings.margin.left, 20, 50, 50);                    doc.text("Testing Report", data.settings.margin.left, 50);                };
                doc.autoTable(columns, rows, {margin: {top: 80}, beforePageContent: header});
                doc.save("table.pdf");            }        </script>    </body> </html>