Below is the code my PDF generator. I am trying to make a pdf having 34 columns. I have tried the landscape mode but its not much visually good.

Is there any way that only columns can come in 1 each row their respective day? or any other way that i will be able to display 34 columns on single page pdf.

const PdfGenerator = () => {

const kycInfoObject = [{
    "maritalStatus": "SINGLE",
    "motherName": "Test",
    "otherBankAccount": "Y",
    "mailingCountryCode": "N/A",
    "residenceStatus": "CITY",
    "mailingCurrentAddressProvince": "222",
    "currentAddress": "DADU",
    "mailingCurrentAddressDistrict": "333",
    "residenceTelephone": "3434",
    "currentAddressCity": "Test city",
    "permanentAddressCountryCode": "0090",
    "permanentCurrentAddressProvince": "222",
    "religion": "ISLAM",
    "mailingAddress": " Test CITY",
    "alternateNumber": "343434",
    "gender": "M",
    "cnicExpiry": "10-10-2025",
    "name": "Testing Name",
    "otherResidenceStatus": "N/A",
    "isCurrentAddressDifferent": "Y",
    "fatherHusbandName": "Tesing Name",
    "isPresentAddressSame": "Y",
    "placeOfBirth": "CITY",
    "currentDistrict": "SDFSDFD",
    "mailingCurrentAddressCity": "233",
    "parantageCode": "001",
    "countryCode": "N/A",
    "currentProvince": "CITY",
    "isMailingAddressSame": "N",
    "permanentCurrentAddressCity": "0090",
    "dob": "10-10-2023",
    "permanentAddress": "DCITY",
    "permanentCurrentAddressDistrict": "222",
    "education": "B.E"
}];

const kycInfo = [
    {
        "key": "maritalStatus",
        "value": "SINGLE"
    },
    {
        "key": "motherName",
        "value": "MOTHER"
    },
    {
        "key": "otherBankAccount",
        "value": "Y"
    },
    {
        "key": "mailingCountryCode",
        "value": "N/A"
    },
    {
        "key": "residenceStatus",
        "value": "CITY"
    },
    {
        "key": "mailingCurrentAddressProvince",
        "value": "222"
    },
    {
        "key": "currentAddress",
        "value": "CITY"
    },
    {
        "key": "mailingCurrentAddressDistrict",
        "value": "333"
    },
    {
        "key": "residenceTelephone",
        "value": "3434"
    },
    {
        "key": "currentAddressCity",
        "value": "CITY"
    },
    {
        "key": "permanentAddressCountryCode",
        "value": "0090"
    },
    {
        "key": "permanentCurrentAddressProvince",
        "value": "222"
    },
    {
        "key": "religion",
        "value": "ISLAM"
    },
    {
        "key": "mailingAddress",
        "value": "CITY CITY"
    },
    {
        "key": "alternateNumber",
        "value": "343434"
    },
    {
        "key": "gender",
        "value": "M"
    },
    {
        "key": "cnicExpiry",
        "value": "10-10-2025"
    },
    {
        "key": "name",
        "value": "TESUNG NAME"
    },
    {
        "key": "otherResidenceStatus",
        "value": "N/A"
    },
    {
        "key": "isCurrentAddressDifferent",
        "value": "Y"
    },
    {
        "key": "fatherHusbandName",
        "value": "Father"
    },
    {
        "key": "isPresentAddressSame",
        "value": "Y"
    },
    {
        "key": "placeOfBirth",
        "value": "CITY"
    },
    {
        "key": "currentDistrict",
        "value": "SDFSDFD"
    },
    {
        "key": "mailingCurrentAddressCity",
        "value": "233"
    },
    {
        "key": "parantageCode",
        "value": "001"
    },
    {
        "key": "countryCode",
        "value": "N/A"
    },
    {
        "key": "currentProvince",
        "value": "CITY"
    },
    {
        "key": "isMailingAddressSame",
        "value": "N"
    },
    {
        "key": "permanentCurrentAddressCity",
        "value": "0090"
    },
    {
        "key": "dob",
        "value": "10-10-2023"
    },
    {
        "key": "permanentAddress",
        "value": "CITY CITY"
    },
    {
        "key": "permanentCurrentAddressDistrict",
        "value": "222"
    },
    {
        "key": "education",
        "value": "B.E"
    }
];




// const kycInfoObject = kycInfo.reduce((obj, item) => {
//     obj[item.key] = item.value;
//     return obj;
// }, {});

// Create a new jsPDF instance
const pdf = new jsPDF();

// Set document properties
pdf.setProperties({
    title: "KYC Information"
})


// Calculate the width of the title and the center of the page
const title = 'KYC Information';
const titleWidth = pdf.getStringUnitWidth(title) * pdf.internal.getFontSize() / pdf.internal.scaleFactor;
const pageCenter = pdf.internal.pageSize.width / 2;
pdf.setFontSize(17);
pdf.setFont('custom', 'bold');
// Add the title to the page, centered
pdf.text(title, pageCenter - titleWidth / 2, 12);

// Generate AutoTable for item details
function mapObjectToString(obj) {
    const result = [];
    for (const key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
            result.push(obj[key]?.toString() || ''); // Convert each value to string or use empty string if undefined/null
        }
    }
    return result;
}

const itemDetailsRows = kycInfoObject?.map((item, index) =>
    mapObjectToString(item)
);


console.log('itemDetailsRows', itemDetailsRows);

let itemDetailsHeaders = kycInfo.map(item => item.key);
// let itemDetailsHeaders = ['maritalStatus', 'motherName', 'otherBankAccount', 'mailingCountryCode'];
itemDetailsHeaders = itemDetailsHeaders.map(item => camelCaseToHumanReadable(item));
// const columnWidths = [30, 30, 30, 30, 30]; // Adjust column widths as needed
const pageWidth = pdf.internal.pageSize.getWidth() - 2 * 13; // Subtract margins
const numColumnsPerRow = 5;
const columnWidth = pageWidth / numColumnsPerRow;

const columnStyles = {};
for (let i = 0; i < itemDetailsHeaders.length; i++) {
    columnStyles[i] = { cellWidth: columnWidth };
}
// Define table styles
const headerStyles = {
    fillColor: [240, 240, 240],
    textColor: [0],
    fontFamily: 'times',
    fontStyle: 'bold',
};

pdf.setFont('times');
const itemDetailsYStart = 44;
pdf.autoTable({
    head: [itemDetailsHeaders],
    body: itemDetailsRows,
    startY: itemDetailsYStart, // Adjust the Y position as needed
    headStyles: {
        fillColor: headerStyles.fillColor,
        textColor: headerStyles.textColor,
        fontStyle: headerStyles.fontStyle,
        fontSize: 10, // Adjust the font size as needed
        font: 'times', // Set the font family
        halign: 'left',
    },
    columnStyles,
    alternateRowStyles: { fillColor: [255, 255, 255] },
    bodyStyles: {
        fontSize: 10, // Adjust the font size for the body
        font: 'times', // Set the font family for the body
        cellPadding: { top: 1, right: 5, bottom: 1, left: 2 }, // Adjust cell padding
        textColor: [0, 0, 0], // Set text color for the body
        rowPageBreak: 'avoid', // Avoid row page breaks
    },
    margin: { top: 10, left: 13 },
});

// Add summary and page numbers
const summaryYStart = pdf.internal.pageSize.getHeight() - 50;

const totalPages = pdf.internal.getNumberOfPages();
for (let i = 1; i <= totalPages; i++) {
    pdf.line(10, 283, 200, 283)
    pdf.setPage(i);
    pdf.setFont('times');
    pdf.text(
        `Page ${i} of ${totalPages}`,
        185,
        pdf.internal.pageSize.getHeight() - 5
    );
}

// Save the PDF 
pdf.save(`RFQ.pdf`);

// pdf open in a new tab
const pdfDataUri = pdf.output('datauristring');
const newTab = window.open();
newTab?.document.write(`<iframe width='100%' height='100%' src='${pdfDataUri}'></iframe>`);

}

i tried doing the 5 columns each row. The columns were mapped were 5 each in row but their data wasn’t.

const PdfGenerator = () => {
// Existing code…

// Calculate column width based on page width and number of columns
const pageWidth = pdf.internal.pageSize.getWidth() - 2 * 13; // Subtract margins
const numColumnsPerRow = 5;
const columnWidth = pageWidth / numColumnsPerRow;

// Adjust column styles to set width for each column
const columnStyles = {};
for (let i = 0; i < itemDetailsHeaders.length; i++) {
    columnStyles[i] = { cellWidth: columnWidth };
}

// Existing code...

// Generate AutoTable for item details
pdf.autoTable({
    // Existing options...
    columnStyles,
    // Existing options...
});

// Existing code...

};