Soy principiante en React y Javascript. He estado tratando de encontrar una solución a mi problema, pero parece que no puedo encontrar la solución específica. Estoy generando un documento .pdf (factura del cliente) usando "jsPdf" y su complemento "jspdf-autoTable".

Todo genera OK dando a cada elemento (texto, imagen, tabla) sus coordenadas de inicio XY en el código javascript. tengo 2 mesas Mesa A y Mesa B. Ambas están colocadas una al lado de la otra en forma vertical. Cuando la "tabla A" aumenta sus filas, llega un momento en que comienza a superponerse a la "tabla B". La tabla B tiene un número fijo de filas.

¿Cómo puedo evitar que la "tabla A" se superponga a la "tabla B" y hacer que TODO el contenido debajo de la "tabla A" se mueva dinámicamente "hacia abajo" cuando la "tabla A" aumenta?

Ejemplo:

 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") }

Todas las filas aquí son estáticas (en mi aplicación, estoy recorriendo una matriz de objetos del carro y generando las filas, pero este ejemplo explica mi problema), si tuviera que agregar 30 filas más a la propiedad del cuerpo de "contentA", la tabla se superpondría con la tabla "contentB".

La propiedad "startY" es la única propiedad en este momento que establece la coordenada 'Y' inicial de cada tabla. No me importa si el contenido debajo de la "tabla A" se divide en una segunda página, solo quiero deshacerme de la superposición vertical.

Cualquier ayuda será apreciada.