I have a table whose data is coming from some API call and I want to print it as pdf using jspdf.I can able to print the table using jspdf library and also able to make text bold for first row(table header) except first column(User Id) of the table. I have tried all the possibilities but still first column is not getting bold. Here is the code below.

home.component.ts

import { Component, OnInit } from '@angular/core';
import { jsPDF } from 'jspdf';
import 'jspdf-autotable';
import { UserOptions } from 'jspdf-autotable';
interface jsPDFCustom extends jsPDF {
  autoTable: (options: UserOptions) => void;
}
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  dataResult: Array<any> = [];
  constructor() {
   
  }

  ngOnInit(): void {
    

  }
  
  
  generatePdf() {
    const doc = new jsPDF() as jsPDFCustom;
    let finalY = 0;
    doc.autoTable({
      html: '#imgTable',
      bodyStyles: { minCellHeight: 10 },
      theme: 'grid',
      styles: { valign: 'middle', overflow: 'linebreak', halign: 'center', minCellHeight: 5 },
      pageBreak: 'avoid',
      columnStyles: {
        2: { cellWidth: 100, minCellHeight: 5 },
      },
      headStyles: { fillColor: '#f2f2f2', textColor: '#000', fontStyle: 'bold', lineWidth: 0.5, lineColor: '#ccc' },

      didDrawCell: function (hookData) {
        if (hookData.section === 'body') {
          if (hookData.row.index === 0 ) {
            console.log(Object.values(hookData.row.cells));
            for (const cell of Object.values(hookData.row.cells)) {
              cell.styles.fontStyle = 'bold';
              cell.styles.fillColor = [211, 211, 211];
            }
            //  doc.text("Page Title", hookData.settings.margin.top, 10);
            doc.setFontSize(10).setFont('undefined', 'bold');
            doc.text(
              "DEPLOYMENT HISTORY",
              85,
              8
            );
          }
          

        }
      },
     
    });
    doc.deletePage(1)
    doc.save('deployment_history.pdf');
  }

}

home.component.html

<table id="imgTable">
              <tr>
                <th>User Id</th>
                <th>ID</th>
                <th>Title</th>
                <th>Completed</th>
              </tr>
              <tr *ngFor="let datares of dataResult" class="border" >
                  <td>{{datares.userId}}</td>
                  <td>{{datares.id}}</td>
                  <td>{{datares.title}}</td>
                  <td>{{datares.completed}}</td>
              </tr>
          </table>
          </div>
          <button (click)="generatePdf()">Generate Pdf</button>