Formatting a Large Table with Many Columns in jsPDF and jspdf-autotable

Question

I'm working on a project where I need to generate a PDF report with a table containing a large number of columns using jsPDF and jspdf-autotable. However, I'm facing challenges with the table format due to the sheer number of columns.

I've already implemented the basic table generation and data fetching logic in my React component. Here's a simplified version of my current code:

import jsPDF from "jspdf";
import autoTable from "jspdf-autotable";

  const generatePDF = async () => {
    const doc = new jsPDF();
    doc.text("Report Heading", 10, 10);

    const columns = [
      "Total Hour",
      "Machine On Time",
      "Rejection Quantity",
      "Actual Production",
      "part_2055566_3rd",
      "Production",
      "Target Production",
      "First Cycle",
      "Last Cycle",
      "part_8PEE027000161N_2ND",
      "Average Cycle Time",
      "Production Time",
      "Ideal Time",
      "Mhr Loss",
    ];
    const rows = pdfData.map(
      (
        item: {
          totalHour: number;
          machineOnTime: number;
          rejectionQuantity: number;
          actualProduction: number;
          part_2055566_3rd: number;
          production: number;
          targetProduction: number;
          firstCycle: number;
          lastCycle: number;
          part_8PEE027000161N_2ND: number;
          avgCycleTime: number;
          productionTime: number;
          idealTime: number;
          mhrLoss: number;
        },
        index: number
      ) => [
        // index + 1,
        item.totalHour,
        item.machineOnTime,
        item.rejectionQuantity,
        item.actualProduction,
        item.part_2055566_3rd,
        item.production,
        item.targetProduction,
        item.firstCycle,
        item.lastCycle,
        item.part_8PEE027000161N_2ND,
        item.avgCycleTime,
        item.productionTime,
        item.idealTime,
        item.mhrLoss,
      ]
    );

    autoTable(doc, {
      head: [columns],
      body: rows,
      startY: 20,
      theme: "striped",
      

      didDrawPage: (data) => {
        doc.text("Production Summary : ", data.settings.margin.left, 15);
      },
    });

    doc.save(`${formattedDate}Report.pdf`);
  };

Sample > PDF data

{
      "totalHour": 22,
      "machineOnTime": 1440,
      "rejectionQuantity": 0,
      "actualProduction": 24,
      "part_2055566_3rd": 9,
      "production": 24,
      "targetProduction": 400,
      "firstCycle": 0,
      "lastCycle": 0,
      "part_8PEE027000161N_2ND": 120,
      "avgCycleTime": "00:51:40",
      "productionTime": 1416,
      "idealTime": 24,
      "mhrLoss": 0
    }

The issue I'm encountering is that the table becomes unreadable when there are many columns, and it doesn't fit properly on the page. I'm looking for guidance on how to format the table to make it more readable and compact, considering that I have a large number of columns.