Search code examples
javascriptjspdfjspdf-autotable

Is there an option for jsAutotable to continue on new page after certain Y is exceeded?

I am creating a pdf with multiple tables in it and it also has a logo on the bottom of the page. Problem is that my table is covering the logo if it's too long. Is it possible to draw some rows on another page if the table exceeds some Y point?

const tableBody = [
    ['column1', 'column2'],
    ['column1', 'column2'],
    ['column1', 'column2'],
            // some more rows to fill the page
];    

doc.autoTable({
                    startY: currentY,
                    head: [['1', '2']],
                    margin: { left: 8, right: 8 },
                    body: tableBody,
                    styles: { font: 'roboto', halign: 'left' },
                    headStyles: { fontStyle: 'roboto', fillColor: COLORS.BASIC },
                    columnStyles: {
                        0: { cellWidth: 10 },
                        1: { cellWidth: 150 },
                    },
                });

Expected result is to show the image and continue the table on another page.

This is what it looks right now: https://i.sstatic.net/3YcG9.png but i want the last two rows on the first page covering the logo to be moved to next page.

Solution

  • This could be done by adding a bottom margin to your autoTable settings (the value would correspond to totalPageHeight - logoPositionY).

    CAVEAT: if the table goes across multiple pages, the margin would be applied to all pages (but one can assume each page will have the logo, in that case it's more an advantage than a problem).

    doc.autoTable({
    startY: currentY,
    head: [['1', '2']],
    margin: { left: 8, right: 8, bottom: yourValue },
    //etc
});

    additional hint: You can use the setting rowPageBreak: 'avoid', to prevent the row to be split across the pages when cells have different height.