I'm a beginner in React and Javascript. I've been trying to find a solution to my problem but can't seem to find the specific solution. I'm generating a .pdf document (customer invoice) using "jsPdf" and it's plugin "jspdf-autoTable".

It all generates OK giving each element (text, image, table) it's XY starting coordinates in the javascript code. I have 2 tables. Table A and Table B. Both are positioned one next to the other vertically. When "table A" increases it's rows, there comes a time when it starts to overlap "table B". Table B has fixed number of rows.

How can I avoid "table A" overlapping "table B", and have ALL the content below "table A" move dynamically 'downward' when "table A" increases?

Example:

const generatePDF = () => {

        const unit = "pt";
        const size = "A4"
        const orientation = "portrait";

        const doc = new jsPDF(orientation, unit, size);

        let contentA = {
            head: [["Item", "Quantity", "Price", "Item Total"]],
           
            body: [
                ['Water Bottle A', '1', '8.99', '8.99'],
                ['Water Bottle B', '1', '8.99', '8.99'],
                ['Water Bottle C', '1', '8.99', '8.99'],
                ['Water Bottle D', '1', '8.99', '8.99'],
               ],
            foot: [['', '', 'Total:', '35.96']],
            margin: 40,
            tableLineWidth: 0.5,
            tableLineColor: "black",
            tableWidth: 'auto',
            startY: 100,
            theme: 'striped',
            pageBreak: 'auto',
        }

        let contentB = {
            head: [["Subtotal", "$35.96"]],
           
            body: [
                ['Taxes', '$4.49'],
                ['Payment Method:', 'Cash'],
               ],
            foot: [['Total:', '35.96']],
            margin: 40,
            tableLineWidth: 0.5,
            tableLineColor: "black",
            tableWidth: 'auto',
            startY: 150,
            theme: 'striped',
            pageBreak: 'auto',
        }

        doc.autoTable(contentA)
        doc.autoTable(contentB)
        doc.text('Thank you for your purchase!', 150, 800);
        doc.save("my-report-document.pdf")
}

All rows here are static (in my app Im looping through a cart array of objects and gnerating the rows, but this example explains my problem), if I where to add 30 more rows to body property of "contentA", the table would overlap with "contentB" table.

The "startY" property is the only property right now establishing the starting 'Y' coordinate of each table. I dont mind if the content below "table A" breaks into a 2nd page, I just want to get rid of the vertical overlapping.

Any help will be appreciated.